From eded98a6cfbe00b5ddfd42dd7bccaeb54d07763a Mon Sep 17 00:00:00 2001
From: Park Byung Eun <geek@loafle.com>
Date: Mon, 10 Aug 2020 14:05:32 +0900
Subject: [PATCH] sync

---
 package-lock.json                             |   6 +-
 package.json                                  |  91 +--
 src/app/app-provider.module.ts                |   8 +-
 src/app/app-routing.module.ts                 |  13 +-
 src/app/app.component.ts                      |  84 ++-
 src/app/app.module.ts                         |  12 +
 .../dialogs/account/account.dialog.module.ts  |   9 +-
 .../components/settings.dialog.component.html | 182 ++----
 .../components/settings.dialog.component.scss |   8 +-
 .../components/settings.dialog.component.ts   | 102 +++-
 .../default-dialog.layout.component.html      |   2 +-
 .../default-dialog.layout.component.scss      |   5 +
 .../components/default.layout.component.html  |  53 +-
 .../components/default.layout.component.scss  |  67 ++-
 .../components/default.layout.component.ts    | 221 ++++---
 .../components/no-navi.layout.component.html  |   2 +-
 .../layouts/components/top-bar.component.html |   7 +-
 .../layouts/components/top-bar.component.ts   |  12 +-
 src/app/layouts/layouts.module.ts             |   8 +-
 src/app/models/group-open-info.ts             |   3 +
 src/app/models/login-session.ts               |   2 +-
 src/app/models/settings.ts                    |   8 +-
 src/app/models/user-store.ts                  |   2 +-
 .../components/login.page.component.scss      |  38 +-
 .../components/logout.page.component.html     |  23 +-
 .../components/logout.page.component.scss     |  53 ++
 .../pages/call/call-routing.page.module.ts    |   9 +-
 src/app/pages/call/call.page.module.ts        |  52 +-
 .../call-history.page.component.html          |  58 ++
 .../call-history.page.component.scss          |  33 ++
 .../call-history.page.component.spec.ts       |  32 +
 .../components/call-history.page.component.ts | 129 ++++
 .../call/components/index.page.component.html |  40 +-
 .../call/components/index.page.component.scss |  33 ++
 src/app/pages/call/components/index.ts        |   7 +-
 .../components/sidenav.page.component.html    |  22 +-
 .../components/sidenav.page.component.scss    |  29 +
 .../call/components/sidenav.page.component.ts | 106 +++-
 src/app/pages/call/types/params.type.ts       |   3 +
 src/app/pages/chat/chat.page.module.ts        |  12 +-
 .../components/chat-room.page.component.html  |  15 +-
 .../components/chat-room.page.component.ts    |  70 ++-
 .../chat/components/index.page.component.scss |  12 +
 .../components/sidenav.page.component.scss    |   6 +-
 .../chat/components/sidenav.page.component.ts |  51 +-
 .../components/index.page.component.html      |   3 +-
 .../components/index.page.component.scss      |   9 +-
 .../group/components/index.page.component.ts  | 149 +++--
 .../components/sidenav.page.component.html    |   2 +
 .../components/sidenav.page.component.ts      |  77 ++-
 src/app/pages/group/group.page.module.ts      |   3 +-
 .../components/index.page.component.scss      |   2 +-
 .../components/index.page.component.html      |   1 +
 .../components/index.page.component.ts        |   5 +-
 .../components/sidenav.page.component.html    |   1 +
 .../components/sidenav.page.component.ts      |  20 +-
 .../organization/organization.page.module.ts  |   5 +-
 src/app/resolvers/app-session.resolver.ts     |   8 +-
 .../account/account.section.module.ts         |   3 +-
 src/app/sections/call/call.section.module.ts  |  63 ++
 src/app/sections/call/components/index.ts     |   4 +
 .../components/info.section.component.html    |  28 +
 .../components/info.section.component.scss    |   0
 .../components/info.section.component.spec.ts |  32 +
 .../call/components/info.section.component.ts | 106 ++++
 .../components/list.section.component.html    | 132 +++++
 .../components/list.section.component.scss    |   4 +
 .../components/list.section.component.spec.ts |  32 +
 .../call/components/list.section.component.ts | 114 ++++
 .../dialogs/dialpad.dialog.component.html     |  14 +
 .../dialogs/dialpad.dialog.component.scss     |  75 +++
 .../dialogs/dialpad.dialog.component.spec.ts  |  26 +
 .../call/dialogs/dialpad.dialog.component.ts  |  86 +++
 src/app/sections/call/dialogs/index.ts        |   3 +
 src/app/sections/chat/chat.section.module.ts  |  21 +-
 .../components/form.section.component.html    |  46 +-
 .../components/form.section.component.scss    |  12 +-
 .../chat/components/form.section.component.ts | 238 +++++---
 .../components/info.section.component.html    |  12 +-
 .../chat/components/info.section.component.ts |  63 +-
 .../components/list.section.component.scss    |   2 +-
 .../chat/components/list.section.component.ts |  20 +-
 .../components/message.section.component.html | 123 +++-
 .../components/message.section.component.scss |  91 +--
 .../components/message.section.component.ts   | 560 ++++++++++++++----
 .../components/search.section.component.html  |  10 +-
 .../components/search.section.component.ts    |  18 +-
 .../chat/dialogs/create.dialog.component.html |  33 +-
 .../chat/dialogs/create.dialog.component.scss |   6 +-
 .../chat/dialogs/create.dialog.component.ts   | 160 ++---
 .../dialogs/file-viewer.dialog.component.ts   |  67 ++-
 .../dialogs/forward.dialog.component.html     |  21 +-
 .../dialogs/forward.dialog.component.scss     |   8 +-
 .../chat/dialogs/forward.dialog.component.ts  | 230 ++++---
 .../chat/dialogs/setting.dialog.component.ts  |   9 +-
 .../dialogs/text-detail.dialog.component.html |   4 +-
 .../dialogs/text-detail.dialog.component.ts   |  49 +-
 .../trans-detail.dialog.component.html        |   2 +-
 .../dialogs/trans-detail.dialog.component.ts  |  29 +-
 .../directives/file-upload-for.directive.ts   | 179 ++++++
 src/app/sections/chat/directives/index.ts     |   3 +
 .../drawers/add-group.drawer.component.html   |   2 +-
 .../drawers/add-group.drawer.component.ts     |  22 +-
 .../drawers/add-users.drawer.component.ts     |  96 +--
 .../drawers/attach-data.drawer.component.html |   8 +-
 .../drawers/attach-data.drawer.component.ts   | 143 +++--
 .../chat/drawers/setting.drawer.component.ts  |  23 +-
 .../chat/drawers/users.drawer.component.html  |   3 +-
 .../chat/drawers/users.drawer.component.ts    |  46 +-
 .../components/info.section.component.html    |   1 +
 .../components/info.section.component.scss    |   2 +-
 .../components/info.section.component.ts      |   8 +-
 .../components/list.section.component.html    |   8 +-
 .../components/list.section.component.ts      | 305 +++++++---
 .../components/profile.section.component.ts   |  12 +-
 .../select-group.section.component.html       |  11 +-
 .../select-group.section.component.scss       |   6 +
 .../select-group.section.component.ts         |  61 +-
 .../select-user.section.component.html        |   4 +-
 .../select-user.section.component.ts          |  17 +-
 .../dialogs/add-user.dialog.component.html    | 124 ++++
 .../dialogs/add-user.dialog.component.scss    |  75 +++
 .../dialogs/add-user.dialog.component.spec.ts |  26 +
 .../dialogs/add-user.dialog.component.ts      | 273 +++++++++
 .../dialogs/create.dialog.component.html      |  14 +-
 .../group/dialogs/create.dialog.component.ts  | 179 ++----
 .../edit-inline-input.dialog.component.html   |   5 +-
 .../edit-inline-input.dialog.component.scss   |  10 +-
 .../edit-inline-input.dialog.component.ts     |  16 +-
 .../dialogs/edit-user.dialog.component.html   |   6 +-
 .../dialogs/edit-user.dialog.component.ts     | 116 ++--
 src/app/sections/group/dialogs/index.ts       |   4 +-
 .../dialogs/manage.dialog.component.html      |   4 +-
 .../group/dialogs/manage.dialog.component.ts  | 122 ++--
 .../sections/group/group.section.module.ts    |   8 +-
 .../components/member-list.component.html     |   7 +-
 .../components/member-list.component.scss     |   4 +-
 .../components/member-list.component.ts       | 119 ++--
 .../dialogs/add-group.dialog.component.html   |   2 +-
 .../dialogs/add-group.dialog.component.scss   |   3 +
 .../dialogs/add-group.dialog.component.ts     |  21 +-
 .../dialogs/profile.dialog.component.html     |   5 +-
 .../dialogs/profile.dialog.component.scss     |   1 +
 .../dialogs/profile.dialog.component.ts       | 134 ++++-
 .../organization.section.module.ts            |   4 +-
 src/app/services/app-account.service.ts       |   2 +-
 .../services/app-authentication.service.ts    |  80 ++-
 src/app/services/app-call.service.ts          |  86 +++
 src/app/services/app-chat.service.ts          | 246 +++++---
 src/app/services/app-file.service.ts          |  71 ++-
 src/app/services/app-group.service.ts         | 491 +++++++++------
 src/app/services/app-native.service.ts        |  72 ++-
 src/app/services/app-notification.service.ts  | 112 ++--
 src/app/services/app-organization.service.ts  |  50 ++
 src/app/services/app-ui.service.ts            | 108 ++++
 src/app/services/app.service.ts               |  68 +--
 src/app/store/app/actions.ts                  |  11 +
 src/app/store/app/effects.ts                  |  52 +-
 src/app/store/app/reducers.ts                 |  18 +-
 src/app/store/app/state.ts                    |  18 +-
 src/app/store/authentication/effects.ts       |   2 +-
 src/app/store/room/actions.ts                 |   5 +
 src/app/store/room/effects.ts                 |  37 +-
 src/app/store/room/reducers.ts                |  11 +-
 src/app/store/room/state.ts                   |  15 +-
 src/app/store/state.ts                        |   3 +
 src/app/types/app-key.type.ts                 |   3 +-
 src/app/types/index.ts                        |   1 +
 src/app/types/navigation.type.ts              |   8 +
 src/app/types/user.type.ts                    |  10 +-
 src/app/types/window-size-mode.type.ts        |   5 +
 .../authentication/authentication.module.ts   |  10 +-
 .../components/change-password.component.html | 103 ++++
 .../components/change-password.component.scss | 140 +++++
 .../change-password.component.spec.ts         |  32 +
 .../components/change-password.component.ts   |  24 +
 .../ucap/authentication/components/index.ts   |   3 +-
 .../components/login.component.scss           |   4 +-
 .../components/login.component.ts             |   5 +-
 src/app/ucap/call/call.module.ts              |  82 +++
 .../history-expansion.component.html          | 137 +++++
 .../history-expansion.component.scss          |  42 ++
 .../history-expansion.component.spec.ts       |  32 +
 .../components/history-expansion.component.ts | 122 ++++
 .../history-list-item-01.component.html       |  41 ++
 .../history-list-item-01.component.scss       |  19 +
 .../history-list-item-01.component.spec.ts    |  26 +
 .../history-list-item-01.component.ts         | 109 ++++
 src/app/ucap/call/components/index.ts         |   9 +
 .../call/components/time-line.component.html  |  14 +
 .../call/components/time-line.component.scss  |   1 +
 .../components/time-line.component.spec.ts    |  32 +
 .../call/components/time-line.component.ts    |  56 ++
 src/app/ucap/chat/chat.module.ts              |  10 +-
 .../attach-downcheck.component.html           |   2 +-
 .../components/attach-downcheck.component.ts  |  28 +-
 .../attach-file-list.component.html           |   2 +-
 .../components/attach-file-list.component.ts  |  33 +-
 .../attach-image-list.component.html          |   2 +-
 .../components/attach-image-list.component.ts |  19 +-
 .../email-send.selector.component.ts          |   6 +-
 .../file-upload.selector.component.scss       |   4 +-
 .../file-upload.selector.component.ts         |   8 +-
 .../components/message-box.component.html     |  24 +-
 .../chat/components/message-box.component.ts  | 249 ++++----
 .../components/recent-message.component.html  |  11 +-
 .../components/recent-message.component.ts    |  22 +-
 .../components/room-expansion.component.ts    |  23 +-
 .../room-list-item-01.component.html          |   3 +-
 .../components/room-list-item-01.component.ts |  17 +-
 .../chat/components/room-list.component.ts    |  19 +-
 .../components/room-setting.component.html    |   5 +-
 .../chat/components/room-setting.component.ts |  17 +-
 .../components/sticker.selector.component.ts  |  15 +-
 .../translation.selector.component.scss       |   2 +-
 .../translation.selector.component.ts         |  22 +-
 .../components/expansion-01.component.html    |  86 ++-
 .../components/expansion-01.component.ts      | 537 +++++++++--------
 .../components/expansion-02.component.html    |   5 +-
 .../components/expansion-02.component.ts      |  89 +--
 src/app/ucap/group/components/index.ts        |   2 +
 .../components/name-input.component.scss      |   4 +-
 .../group/components/name-input.component.ts  |  20 +-
 .../profile-image-01.component.html           |   1 +
 .../components/profile-image-01.component.ts  |  31 +-
 .../components/profile-list-01.component.html |   2 +-
 .../components/profile-list-01.component.ts   |  12 +-
 .../profile-list-item-02.component.html       |  79 +--
 .../profile-list-item-02.component.ts         |  99 ++--
 .../profile-list-item-03.component.html       |  48 +-
 .../profile-list-item-03.component.scss       |   8 -
 .../profile-list-item-03.component.ts         |  57 +-
 .../profile-list-item-04.component.html       |  56 ++
 .../profile-list-item-04.component.scss       |  19 +
 .../profile-list-item-04.component.spec.ts    |  26 +
 .../profile-list-item-04.component.ts         | 151 +++++
 .../components/profile-list.component.html    |  18 +-
 .../components/profile-list.component.ts      |  68 ++-
 src/app/ucap/group/group.module.ts            |   4 +-
 .../components/profile-01.component.html      |   7 +-
 .../components/profile-01.component.scss      |   8 +-
 .../components/profile-01.component.ts        | 191 +++---
 .../components/profile-image-01.component.ts  |  24 +-
 .../components/profile-list.component.html    |  59 +-
 .../components/profile-list.component.ts      |  72 ++-
 .../components/profile-menu-01.component.html |   4 +-
 .../components/profile-menu-01.component.ts   |  14 +-
 .../profile-navigation-list.component.html    |  32 +-
 .../profile-navigation-list.component.scss    |   6 +-
 .../profile-navigation-list.component.ts      |  46 +-
 .../search-for-tenant.component.html          |   9 +-
 .../components/search-for-tenant.component.ts |  83 ++-
 .../organization/components/tree.component.ts |  50 +-
 .../ucap/organization/organization.module.ts  |  15 +-
 .../materialdesignicons/scss/_variables.scss  |   2 +-
 src/assets/i18n/en/call.json                  |  17 +
 src/assets/i18n/en/chat.json                  |  15 +
 src/assets/i18n/en/common.json                |   4 +-
 src/assets/i18n/en/group.json                 |  14 +-
 src/assets/i18n/en/locale.json                |   1 +
 src/assets/i18n/en/organization.json          |   3 +-
 src/assets/i18n/ko/call.json                  |  17 +
 src/assets/i18n/ko/chat.json                  |  15 +
 src/assets/i18n/ko/common.json                |   4 +-
 src/assets/i18n/ko/group.json                 |  14 +-
 src/assets/i18n/ko/locale.json                |   1 +
 src/assets/i18n/ko/organization.json          |   3 +-
 src/assets/images/ico/img_logout.png          | Bin 0 -> 56667 bytes
 src/assets/images/ico/img_logout_text.svg     |  14 +
 src/assets/scss/_fonts.scss                   |  60 +-
 src/assets/scss/global/_default.scss          |  71 ++-
 src/assets/scss/global/_material-ui.scss      |  19 +-
 src/assets/scss/global/ucap/_call.scss        |  39 ++
 src/assets/scss/global/ucap/_chat.scss        |  50 +-
 src/assets/scss/global/ucap/_dialog.scss      |  91 ++-
 src/assets/scss/global/ucap/_group.scss       |   7 -
 .../scss/global/ucap/_organization.scss       |  50 +-
 .../scss/mixins/_ucap-organization.scss       |   3 +-
 src/environments/environment.hmr.ts           |  33 +-
 src/environments/environment.prod.ts          |  35 +-
 src/environments/environment.ts               |  35 +-
 src/environments/environment.type.ts          |  36 +-
 src/favicon.ico                               | Bin 948 -> 109473 bytes
 src/index.html                                |  14 +-
 284 files changed, 9356 insertions(+), 3347 deletions(-)
 create mode 100644 src/app/pages/call/components/call-history.page.component.html
 create mode 100644 src/app/pages/call/components/call-history.page.component.scss
 create mode 100644 src/app/pages/call/components/call-history.page.component.spec.ts
 create mode 100644 src/app/pages/call/components/call-history.page.component.ts
 create mode 100644 src/app/pages/call/types/params.type.ts
 create mode 100644 src/app/sections/call/call.section.module.ts
 create mode 100644 src/app/sections/call/components/index.ts
 create mode 100644 src/app/sections/call/components/info.section.component.html
 create mode 100644 src/app/sections/call/components/info.section.component.scss
 create mode 100644 src/app/sections/call/components/info.section.component.spec.ts
 create mode 100644 src/app/sections/call/components/info.section.component.ts
 create mode 100644 src/app/sections/call/components/list.section.component.html
 create mode 100644 src/app/sections/call/components/list.section.component.scss
 create mode 100644 src/app/sections/call/components/list.section.component.spec.ts
 create mode 100644 src/app/sections/call/components/list.section.component.ts
 create mode 100644 src/app/sections/call/dialogs/dialpad.dialog.component.html
 create mode 100644 src/app/sections/call/dialogs/dialpad.dialog.component.scss
 create mode 100644 src/app/sections/call/dialogs/dialpad.dialog.component.spec.ts
 create mode 100644 src/app/sections/call/dialogs/dialpad.dialog.component.ts
 create mode 100644 src/app/sections/call/dialogs/index.ts
 create mode 100644 src/app/sections/chat/directives/file-upload-for.directive.ts
 create mode 100644 src/app/sections/chat/directives/index.ts
 create mode 100644 src/app/sections/group/dialogs/add-user.dialog.component.html
 create mode 100644 src/app/sections/group/dialogs/add-user.dialog.component.scss
 create mode 100644 src/app/sections/group/dialogs/add-user.dialog.component.spec.ts
 create mode 100644 src/app/sections/group/dialogs/add-user.dialog.component.ts
 create mode 100644 src/app/services/app-call.service.ts
 create mode 100644 src/app/services/app-organization.service.ts
 create mode 100644 src/app/services/app-ui.service.ts
 create mode 100644 src/app/types/navigation.type.ts
 create mode 100644 src/app/types/window-size-mode.type.ts
 create mode 100644 src/app/ucap/authentication/components/change-password.component.html
 create mode 100644 src/app/ucap/authentication/components/change-password.component.scss
 create mode 100644 src/app/ucap/authentication/components/change-password.component.spec.ts
 create mode 100644 src/app/ucap/authentication/components/change-password.component.ts
 create mode 100644 src/app/ucap/call/call.module.ts
 create mode 100644 src/app/ucap/call/components/history-expansion.component.html
 create mode 100644 src/app/ucap/call/components/history-expansion.component.scss
 create mode 100644 src/app/ucap/call/components/history-expansion.component.spec.ts
 create mode 100644 src/app/ucap/call/components/history-expansion.component.ts
 create mode 100644 src/app/ucap/call/components/history-list-item-01.component.html
 create mode 100644 src/app/ucap/call/components/history-list-item-01.component.scss
 create mode 100644 src/app/ucap/call/components/history-list-item-01.component.spec.ts
 create mode 100644 src/app/ucap/call/components/history-list-item-01.component.ts
 create mode 100644 src/app/ucap/call/components/index.ts
 create mode 100644 src/app/ucap/call/components/time-line.component.html
 create mode 100644 src/app/ucap/call/components/time-line.component.scss
 create mode 100644 src/app/ucap/call/components/time-line.component.spec.ts
 create mode 100644 src/app/ucap/call/components/time-line.component.ts
 create mode 100644 src/app/ucap/group/components/profile-list-item-04.component.html
 create mode 100644 src/app/ucap/group/components/profile-list-item-04.component.scss
 create mode 100644 src/app/ucap/group/components/profile-list-item-04.component.spec.ts
 create mode 100644 src/app/ucap/group/components/profile-list-item-04.component.ts
 create mode 100644 src/assets/images/ico/img_logout.png
 create mode 100644 src/assets/images/ico/img_logout_text.svg

diff --git a/package-lock.json b/package-lock.json
index 9d4c475..9315ebd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2022,9 +2022,9 @@
       "integrity": "sha512-GA9MDcwCvtxI0gOysgRm7DDHIfKfhCkDSa69QBFIEgWbob2OdGYKvxfymr6lGdl+vY7AqjlJXvSFkA1b0rTy1A=="
     },
     "@ucap/ng-core": {
-      "version": "0.0.7",
-      "resolved": "https://nexus.loafle.net/repository/npm-all/@ucap/ng-core/-/ng-core-0.0.7.tgz",
-      "integrity": "sha512-ZC6LE3A0bg+REGbzDI/i1ad7mGpKsw6X0UtZ+Q8TUthHNv0DfWEieHFCgfYTRY1u022XyQ4ViOsrq9KunU1vfw=="
+      "version": "0.0.8",
+      "resolved": "https://nexus.loafle.net/repository/npm-all/@ucap/ng-core/-/ng-core-0.0.8.tgz",
+      "integrity": "sha512-VMvitw2PnaGo4tsdD9EJcvzVi5Kt+xjzA6z09uLavPpAWViFXTx7P76N1nt7XMgACRAMOTMyNocWTbFs6oKsqA=="
     },
     "@ucap/ng-i18n": {
       "version": "0.0.6",
diff --git a/package.json b/package.json
index c7e5b4c..6eeddc3 100644
--- a/package.json
+++ b/package.json
@@ -31,24 +31,39 @@
     "@ngrx/entity": "^9.2.0",
     "@ngrx/router-store": "^9.2.0",
     "@ngrx/store": "^9.2.0",
-    "@ucap/api": "~0.0.4",
-    "@ucap/api-common": "~0.0.11",
-    "@ucap/api-external": "~0.0.5",
-    "@ucap/api-message": "~0.0.3",
-    "@ucap/api-prompt": "~0.0.3",
-    "@ucap/api-public": "~0.0.4",
-    "@ucap/core": "~0.0.14",
-    "@ucap/logger": "~0.0.13",
-    "@ucap/native": "~0.0.19",
+    "@ucap/api": "~0.0.5",
+    "@ucap/api-common": "~0.0.12",
+    "@ucap/api-contact": "~0.0.5",
+    "@ucap/api-external": "~0.0.8",
+    "@ucap/api-message": "~0.0.7",
+    "@ucap/api-prompt": "~0.0.6",
+    "@ucap/api-public": "~0.0.6",
+    "@ucap/api-webex": "~0.0.2",
+    "@ucap/core": "~0.0.15",
+    "@ucap/domain-authentication": "~0.0.4",
+    "@ucap/domain-authorization": "~0.0.3",
+    "@ucap/domain-call": "~0.0.4",
+    "@ucap/domain-chat": "~0.0.3",
+    "@ucap/domain-common": "~0.0.1",
+    "@ucap/domain-group": "~0.0.2",
+    "@ucap/domain-message": "~0.0.1",
+    "@ucap/domain-organization": "~0.0.1",
+    "@ucap/domain-status": "~0.0.1",
+    "@ucap/electron-native": "~0.0.19",
+    "@ucap/i18n": "~0.0.2",
+    "@ucap/logger": "~0.0.14",
+    "@ucap/native": "~0.0.27",
     "@ucap/ng-api-common": "~0.0.1",
     "@ucap/ng-api-external": "~0.0.1",
     "@ucap/ng-api-message": "~0.0.1",
     "@ucap/ng-api-prompt": "~0.0.1",
     "@ucap/ng-api-public": "~0.0.1",
-    "@ucap/ng-core": "~0.0.7",
+    "@ucap/ng-api-webex": "~0.0.1",
+    "@ucap/ng-api-contact": "~0.0.2",
+    "@ucap/ng-core": "~0.0.9",
     "@ucap/ng-logger": "~0.0.2",
-    "@ucap/ng-i18n": "~0.0.6",
-    "@ucap/ng-native": "~0.0.5",
+    "@ucap/ng-i18n": "~0.0.8",
+    "@ucap/ng-native": "~0.0.12",
     "@ucap/ng-pi": "~0.0.1",
     "@ucap/ng-protocol": "~0.0.3",
     "@ucap/ng-protocol-authentication": "~0.0.3",
@@ -66,35 +81,37 @@
     "@ucap/ng-protocol-status": "~0.0.3",
     "@ucap/ng-protocol-sync": "~0.0.3",
     "@ucap/ng-protocol-umg": "~0.0.3",
-    "@ucap/ng-store-authentication": "~0.0.14",
-    "@ucap/ng-store-chat": "~0.0.66",
-    "@ucap/ng-store-group": "~0.0.22",
-    "@ucap/ng-store-organization": "~0.0.20",
+    "@ucap/ng-store-authentication": "~0.0.17",
+    "@ucap/ng-store-chat": "~0.0.74",
+    "@ucap/ng-store-group": "~0.0.25",
+    "@ucap/ng-store-organization": "~0.0.23",
+    "@ucap/ng-store-call": "~0.0.7",
     "@ucap/ng-web-socket": "~0.0.2",
     "@ucap/ng-web-storage": "~0.0.3",
-    "@ucap/ng-ui": "0.0.97",
-    "@ucap/ng-ui-organization": "~0.0.202",
-    "@ucap/ng-ui-authentication": "~0.0.29",
-    "@ucap/ng-ui-group": "~0.0.78",
-    "@ucap/ng-ui-chat": "~0.0.72",
+    "@ucap/ng-ui": "~0.0.108",
+    "@ucap/ng-ui-organization": "~0.0.222",
+    "@ucap/ng-ui-authentication": "~0.0.32",
+    "@ucap/ng-ui-group": "~0.0.87",
+    "@ucap/ng-ui-chat": "~0.0.80",
+    "@ucap/ng-ui-call": "~0.0.15",
     "@ucap/ng-ui-material": "~0.0.4",
     "@ucap/ng-ui-skin-default": "~0.0.1",
-    "@ucap/pi": "~0.0.8",
-    "@ucap/protocol": "~0.0.17",
-    "@ucap/protocol-authentication": "~0.0.5",
-    "@ucap/protocol-buddy": "~0.0.5",
-    "@ucap/protocol-event": "~0.0.6",
-    "@ucap/protocol-file": "~0.0.6",
-    "@ucap/protocol-group": "~0.0.5",
-    "@ucap/protocol-info": "~0.0.9",
-    "@ucap/protocol-inner": "~0.0.4",
-    "@ucap/protocol-option": "~0.0.7",
-    "@ucap/protocol-ping": "~0.0.6",
-    "@ucap/protocol-query": "~0.0.5",
-    "@ucap/protocol-room": "~0.0.7",
-    "@ucap/protocol-service": "~0.0.4",
-    "@ucap/protocol-status": "~0.0.5",
-    "@ucap/protocol-sync": "~0.0.6",
+    "@ucap/pi": "~0.0.9",
+    "@ucap/protocol": "~0.0.20",
+    "@ucap/protocol-authentication": "~0.0.7",
+    "@ucap/protocol-buddy": "~0.0.6",
+    "@ucap/protocol-event": "~0.0.11",
+    "@ucap/protocol-file": "~0.0.7",
+    "@ucap/protocol-group": "~0.0.6",
+    "@ucap/protocol-info": "~0.0.10",
+    "@ucap/protocol-inner": "~0.0.5",
+    "@ucap/protocol-option": "~0.0.9",
+    "@ucap/protocol-ping": "~0.0.7",
+    "@ucap/protocol-query": "~0.0.8",
+    "@ucap/protocol-room": "~0.0.9",
+    "@ucap/protocol-service": "~0.0.5",
+    "@ucap/protocol-status": "~0.0.6",
+    "@ucap/protocol-sync": "~0.0.8",
     "@ucap/protocol-umg": "~0.0.5",
     "@ucap/ui-scss": "~0.0.5",
     "@ucap/web-socket": "~0.0.10",
diff --git a/src/app/app-provider.module.ts b/src/app/app-provider.module.ts
index 625d68f..212ad7b 100644
--- a/src/app/app-provider.module.ts
+++ b/src/app/app-provider.module.ts
@@ -15,10 +15,13 @@ import { AppAuthenticationService } from './services/app-authentication.service'
 import { AppNotificationService } from './services/app-notification.service';
 import { AppNativeService } from './services/app-native.service';
 import { AppService } from './services/app.service';
+import { AppCallService } from './services/app-call.service';
 import { AppChatService } from './services/app-chat.service';
 import { AppFileService } from './services/app-file.service';
 import { AppGroupService } from './services/app-group.service';
 import { AppAccountService } from './services/app-account.service';
+import { AppUiService } from './services/app-ui.service';
+import { AppOrganizationService } from './services/app-organization.service';
 
 const GUARDS = [AppAuthenticationGuard];
 const RESOLVERS = [AppSessionResolver];
@@ -27,10 +30,13 @@ const SERVICES = [
   AppAuthenticationService,
   AppNativeService,
   AppFileService,
+  AppCallService,
   AppChatService,
   AppNotificationService,
+  AppOrganizationService,
   AppGroupService,
-  AppAccountService
+  AppAccountService,
+  AppUiService
 ];
 
 const axiosFactory = () => {
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 0833757..889d90c 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -6,11 +6,12 @@ import { NoNaviLayoutComponent } from '@app/layouts/components/no-navi.layout.co
 
 import { AppAuthenticationGuard } from '@app/guards/app-authentication.guard';
 import { AppSessionResolver } from './resolvers/app-session.resolver';
+import { NavigationType } from './types';
 
 const routes: Routes = [
   {
     path: '',
-    redirectTo: '/group/(content:index)',
+    redirectTo: `/${NavigationType.Group}/(content:index)`,
     pathMatch: 'full'
   },
   {
@@ -38,35 +39,35 @@ const routes: Routes = [
     },
     children: [
       {
-        path: 'organization',
+        path: NavigationType.Organization,
         loadChildren: () =>
           import('./pages/organization/organization.page.module').then(
             (m) => m.AppOrganizationPageModule
           )
       },
       {
-        path: 'group',
+        path: NavigationType.Group,
         loadChildren: () =>
           import('./pages/group/group.page.module').then(
             (m) => m.AppGroupPageModule
           )
       },
       {
-        path: 'chat',
+        path: NavigationType.Chat,
         loadChildren: () =>
           import('./pages/chat/chat.page.module').then(
             (m) => m.AppChatPageModule
           )
       },
       {
-        path: 'call',
+        path: NavigationType.Call,
         loadChildren: () =>
           import('./pages/call/call.page.module').then(
             (m) => m.AppCallPageModule
           )
       },
       {
-        path: 'message',
+        path: NavigationType.Message,
         loadChildren: () =>
           import('./pages/message/message.page.module').then(
             (m) => m.AppMessagePageModule
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 24f685f..1acb28e 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,30 +1,44 @@
+import { fromEvent, interval, Subject } from 'rxjs';
+import { debounce, takeUntil } from 'rxjs/operators';
+
 import {
   Component,
   OnDestroy,
   OnInit,
   AfterViewInit,
-  Renderer2
+  Renderer2,
+  Inject
 } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { Router } from '@angular/router';
 
 import { Store } from '@ngrx/store';
 
+import { NativeService } from '@ucap/native';
+
+import { UCAP_NATIVE_SERVICE } from '@ucap/ng-native';
+
 import { AppActions } from '@app/store/actions';
-import { fromEvent, interval, Subject } from 'rxjs';
-import { debounce, takeUntil } from 'rxjs/operators';
+
 import { AppAuthenticationService } from './services/app-authentication.service';
+import { AnimationBuilder, style, animate } from '@angular/animations';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
+export class AppComponent implements OnInit, OnDestroy {
   private ngOnDestroySubject: Subject<void> = new Subject();
 
   constructor(
+    private router: Router,
     private renderer2: Renderer2,
     private store: Store<any>,
-    private appAuthenticationService: AppAuthenticationService
+    private appAuthenticationService: AppAuthenticationService,
+    @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
+    @Inject(DOCUMENT) private _document: any,
+    private _animationBuilder: AnimationBuilder
   ) {
     fromEvent(window, 'resize')
       .pipe(
@@ -38,6 +52,12 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
         });
       });
 
+    fromEvent(window, 'unload')
+      .pipe(takeUntil(this.ngOnDestroySubject))
+      .subscribe((event: any) => {
+        this.nativeService.app_postDestroy();
+      });
+
     // fromEvent(window, 'beforeunload')
     //   .pipe(takeUntil(this.ngOnDestroySubject))
     //   .subscribe((event: any) => {
@@ -50,6 +70,53 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
       width: window.innerWidth,
       height: window.innerHeight
     });
+    this.nativeService.app_postInit().then((info) => {
+      if (!info) {
+        return;
+      }
+      if (!!info.initUrl) {
+        this.router.navigateByUrl(info.initUrl);
+      }
+    });
+
+    const splash = this._document.body.querySelector('#ucap-lg-web-splash');
+    const player = this._animationBuilder
+      .build([
+        style({ opacity: '1' }),
+        animate(
+          '400ms ease',
+          style({
+            opacity: '0',
+            zIndex: '-10'
+          })
+        )
+      ])
+      .create(splash);
+
+    setTimeout(() => {
+      player.play();
+    }, 0);
+
+    // const preloader = this.renderer2.selectRootElement(
+    //   '#ucap-lg-web-preloader'
+    // );
+    // const fadeEffect = setInterval(() => {
+    //   if (!preloader.style.opacity) {
+    //     this.renderer2.setStyle(preloader, 'opacity', 1);
+    //   }
+    //   if (preloader.style.opacity > 0) {
+    //     this.renderer2.setStyle(
+    //       preloader,
+    //       'opacity',
+    //       preloader.style.opacity - 0.1
+    //     );
+    //   } else {
+    //     this.renderer2.setStyle(preloader, 'display', 'none');
+    //     clearInterval(fadeEffect);
+    //   }
+    // }, 200);
+
+    // this.renderer2.setStyle(preloader, 'display', 'none');
   }
 
   ngOnDestroy(): void {
@@ -59,13 +126,6 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
     }
   }
 
-  ngAfterViewInit(): void {
-    const preloader = this.renderer2.selectRootElement(
-      '#ucap-lg-web-preloader'
-    );
-    this.renderer2.setStyle(preloader, 'display', 'none');
-  }
-
   private dispatchWindowSize(size: { width: number; height: number }) {
     this.store.dispatch(AppActions.windowResized(size));
   }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 02210bb..bfbeac9 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -15,8 +15,10 @@ import { LoggerModule } from '@ucap/ng-logger';
 import { CommonApiModule } from '@ucap/ng-api-common';
 import { PublicApiModule } from '@ucap/ng-api-public';
 import { ExternalApiModule } from '@ucap/ng-api-external';
+import { ContactApiModule } from '@ucap/ng-api-contact';
 import { MessageApiModule } from '@ucap/ng-api-message';
 import { PromptApiModule } from '@ucap/ng-api-prompt';
+import { WebexApiModule } from '@ucap/ng-api-webex';
 
 import { PiModule } from '@ucap/ng-pi';
 
@@ -46,6 +48,7 @@ import { OrganizationStoreModule } from '@ucap/ng-store-organization';
 import { AuthenticationStoreModule } from '@ucap/ng-store-authentication';
 import { GroupStoreModule } from '@ucap/ng-store-group';
 import { ChatStoreModule } from '@ucap/ng-store-chat';
+import { CallStoreModule } from '@ucap/ng-store-call';
 
 import { OrganizationUiModule } from '@ucap/ng-ui-organization';
 
@@ -62,6 +65,7 @@ import { metaReducers } from '@app/store/state';
 import { AppAccountDialogModule } from '@app/dialogs/account/account.dialog.module';
 
 import { environment } from '@environments';
+import { MatDialogModule } from '@angular/material/dialog';
 
 @NgModule({
   declarations: [AppComponent],
@@ -121,13 +125,17 @@ import { environment } from '@environments';
      */
     EffectsModule.forRoot([...effects]),
 
+    MatDialogModule,
+
     LoggerModule.forRoot({}),
 
     CommonApiModule.forRoot(environment.commonApiModuleConfig),
     PublicApiModule.forRoot(environment.publicApiModuleConfig),
     ExternalApiModule.forRoot(environment.externalApiModuleConfig),
+    ContactApiModule.forRoot(environment.contactApiModuleConfig),
     MessageApiModule.forRoot(environment.messageApiModuleConfig),
     PromptApiModule.forRoot(environment.promptApiModuleConfig),
+    WebexApiModule.forRoot(environment.webexApiModuleConfig),
 
     PiModule.forRoot(environment.piModuleConfig),
 
@@ -162,6 +170,10 @@ import { environment } from '@environments';
       eventRequestDefaultCount:
         environment.productConfig.chat.eventRequestDefaultCount
     }),
+    CallStoreModule.forRoot({
+      historyRequestDefaultCount:
+        environment.productConfig.call.historyRequestDefaultCount
+    }),
 
     OrganizationUiModule.forRoot({}),
 
diff --git a/src/app/dialogs/account/account.dialog.module.ts b/src/app/dialogs/account/account.dialog.module.ts
index c756cb2..9411a46 100644
--- a/src/app/dialogs/account/account.dialog.module.ts
+++ b/src/app/dialogs/account/account.dialog.module.ts
@@ -13,11 +13,12 @@ import { MatSelectModule } from '@angular/material/select';
 import { MatTabsModule } from '@angular/material/tabs';
 
 import { I18nModule } from '@ucap/ng-i18n';
-import { UiModule } from '@ucap/ng-ui';
+
+import { UiscrollingModule } from '@ucap/ng-ui/scrolling';
 
 import { AppLayoutsModule } from '@app/layouts/layouts.module';
 import { AppAccountSectionModule } from '@app/sections/account/account.section.module';
-
+import { AppAuthenticationModule } from '@app/ucap/authentication/authentication.module';
 import { COMPONENTS } from './components';
 
 @NgModule({
@@ -36,7 +37,9 @@ import { COMPONENTS } from './components';
 
     I18nModule,
 
-    UiModule,
+    UiscrollingModule,
+
+    AppAuthenticationModule,
 
     AppLayoutsModule,
     AppAccountSectionModule
diff --git a/src/app/dialogs/account/components/settings.dialog.component.html b/src/app/dialogs/account/components/settings.dialog.component.html
index ed932b0..6ff1a0f 100644
--- a/src/app/dialogs/account/components/settings.dialog.component.html
+++ b/src/app/dialogs/account/components/settings.dialog.component.html
@@ -30,7 +30,10 @@
               <div class="settings-contents">
                 <ul>
                   <li>
-                    <mat-checkbox>
+                    <mat-checkbox
+                      [value]="settings.general.autoLaunch"
+                      (change)="onChangeForAutoStartOnBoot($event)"
+                    >
                       {{
                         'authentication:login.settings.autoStartOnBoot'
                           | ucapI18n
@@ -38,12 +41,18 @@
                     </mat-checkbox>
                   </li>
                   <li>
-                    <mat-checkbox>
+                    <mat-checkbox
+                      [value]="settings.general.autoLogin"
+                      (change)="onChangeForAutoLogin($event)"
+                    >
                       {{ 'authentication:login.settings.autoLogin' | ucapI18n }}
                     </mat-checkbox>
                   </li>
                   <li>
-                    <mat-checkbox>
+                    <mat-checkbox
+                      [value]="settings.general.startupHideWindow"
+                      (change)="onChangeForAutoHide($event)"
+                    >
                       {{ 'authentication:login.settings.autoHide' | ucapI18n }}
                     </mat-checkbox>
                   </li>
@@ -66,7 +75,7 @@
                   class="setting-select-obj ucap-mat-input-container"
                 >
                   <mat-select
-                    [value]="generalSetting.locale"
+                    [value]="settings.general.locale"
                     (selectionChange)="onSelectionChangeLanguage($event)"
                   >
                     <mat-option
@@ -95,7 +104,7 @@
                   class="setting-select-obj ucap-mat-input-container"
                 >
                   <mat-select
-                    [value]="generalSetting.hrInfoLocale"
+                    [value]="settings.general.hrInfoLocale"
                     (selectionChange)="onSelectionChangeHrLanguage($event)"
                   >
                     <mat-option
@@ -122,10 +131,13 @@
                   class="setting-select-obj ucap-mat-input-container"
                 >
                   <mat-select
+                    [class.ucap-select-placeholder-value]="
+                      !!timezonePlaceholder
+                    "
                     #selectForTimezone
                     [formControl]="formControlForTimezone"
                     [placeholder]="timezonePlaceholder"
-                    [value]="generalSetting.timezone"
+                    [value]="settings.general.timezone"
                     (openedChange)="onOpenedChangeTimezone($event)"
                   >
                     <ucap-virtual-scroll-viewport
@@ -162,6 +174,8 @@
                 <mat-radio-group
                   aria-label="Select an type of alarm"
                   class="settings-radio-group"
+                  [value]="String(settings.notification.use)"
+                  (change)="onChangeForReceiveNotification($event)"
                 >
                   <mat-radio-button value="true">
                     {{
@@ -186,20 +200,25 @@
                   appearance="standard"
                   class="setting-select-obj ucap-mat-input-container"
                 >
-                  <mat-select>
-                    <mat-option value="sound">
+                  <mat-select
+                    [value]="settings.notification.method"
+                    (selectionChange)="
+                      onSelectionChangeMethodOfNotification($event)
+                    "
+                  >
+                    <mat-option [value]="NotificationMethod.Sound">
                       {{
                         'organization:settings.notification.methodTypeSound'
                           | ucapI18n
                       }}
                     </mat-option>
-                    <mat-option value="alert">
+                    <mat-option [value]="NotificationMethod.Alert">
                       {{
                         'organization:settings.notification.methodTypeAlert'
                           | ucapI18n
                       }}
                     </mat-option>
-                    <mat-option value="soundAndAlert">
+                    <mat-option [value]="NotificationMethod.SoundAndAlert">
                       {{
                         'organization:settings.notification.methodTypeSoundAndAlert'
                           | ucapI18n
@@ -222,7 +241,12 @@
                   appearance="standard"
                   class="setting-select-obj ucap-mat-input-container"
                 >
-                  <mat-select>
+                  <mat-select
+                    [value]="String(settings.notification.alertExposureTime)"
+                    (selectionChange)="
+                      onSelectionChangeAlertExposureTimeOfNotification($event)
+                    "
+                  >
                     <mat-option value="5">
                       5{{ 'common:units.second' | ucapI18n }}
                     </mat-option>
@@ -249,7 +273,12 @@
               <div class="settings-contents">
                 <ul>
                   <li>
-                    <mat-checkbox>
+                    <mat-checkbox
+                      [value]="settings.notification.receiveForMessage"
+                      (change)="
+                        onChangeForReceiveForMessageOfNotification($event)
+                      "
+                    >
                       {{
                         'organization:settings.notification.receiveForMessageTypePopup'
                           | ucapI18n
@@ -269,7 +298,7 @@
             <!-- 대화 -->
             <div class="messenger-settings-area">
               <div class="title-settings-subject">파일 전송</div>
-              <div class="settings-contents02">
+              <div class="settings-contents02" *ngIf="'electron' === platform">
                 <div class="subtitle-settings-info">
                   다운로드 폴더
                 </div>
@@ -278,18 +307,12 @@
                     color="accent"
                     class="setting-input-obj input-set-obj ucap-mat-input-container"
                   >
-                    <input
-                      matInput
-                      placeholder=""
-                      value=""
-                      [readonly]="'browser' === platform"
-                    />
+                    <input matInput placeholder="" value="" />
                     <button
                       mat-button
                       matSuffix
                       mat-icon-button
                       aria-label="file"
-                      [disabled]="'browser' === platform"
                     >
                       <mat-icon>folder</mat-icon>
                     </button>
@@ -299,7 +322,6 @@
                   mat-stroked-button
                   color="primary"
                   class="btn-folder-first"
-                  [disabled]="'browser' === platform"
                 >
                   폴더 초기화
                 </button>
@@ -338,123 +360,7 @@
           </ng-template>
           <div class="secret-num-settings-area">
             <!-- 비밀번호 -->
-            <div class="messenger-settings-area">
-              <div class="title-settings-subject">
-                {{ 'authentication:password.fields.changePassword' | ucapI18n }}
-              </div>
-              <div class="settings-contents02">
-                <div class="subtitle-settings-info">
-                  {{
-                    'authentication:password.fields.currentPassword' | ucapI18n
-                  }}
-                </div>
-                <div class="settings-sub-content">
-                  <mat-form-field
-                    color="accent"
-                    class="setting-input-obj ucap-mat-input-container"
-                  >
-                    <input
-                      matInput
-                      placeholder="{{
-                        'authentication:password.placeholder.currentPassword'
-                          | ucapI18n
-                      }}"
-                      value=""
-                    />
-                    <button
-                      mat-button
-                      matSuffix
-                      mat-icon-button
-                      aria-label="action"
-                    >
-                      <mat-icon>done</mat-icon>
-                    </button>
-                    <mat-hint>Hint</mat-hint>
-                  </mat-form-field>
-                </div>
-              </div>
-              <div class="settings-contents02">
-                <div class="subtitle-settings-info">
-                  {{ 'authentication:password.fields.newPassword' | ucapI18n }}
-                </div>
-                <div class="settings-sub-content">
-                  <mat-form-field
-                    color="accent"
-                    class="setting-input-obj ucap-mat-input-container"
-                  >
-                    <input
-                      matInput
-                      placeholder="{{
-                        'authentication:password.placeholder.newPassword'
-                          | ucapI18n
-                      }}"
-                      value=""
-                    />
-                    <button
-                      mat-button
-                      matSuffix
-                      mat-icon-button
-                      aria-label="action"
-                    >
-                      <mat-icon>done</mat-icon>
-                    </button>
-                    <mat-hint
-                      >반드시 영어 소문자, 숫자, 특수문자 중 2가지 이상 사용해야
-                      합니다.</mat-hint
-                    >
-                  </mat-form-field>
-
-                  <mat-form-field
-                    color="accent"
-                    class="setting-input-obj ucap-mat-input-container"
-                  >
-                    <input
-                      matInput
-                      placeholder="{{
-                        'authentication:password.placeholder.newPasswordConfirm'
-                          | ucapI18n
-                      }}"
-                      value=""
-                    />
-                    <button
-                      mat-button
-                      matSuffix
-                      mat-icon-button
-                      aria-label="action"
-                    >
-                      <mat-icon>done</mat-icon>
-                    </button>
-                    <mat-error>Error</mat-error>
-                  </mat-form-field>
-                </div>
-              </div>
-
-              <div class="pass-info-box">
-                <dl>
-                  <dt>
-                    <mat-icon color="accent" class="bullet-ico-info"
-                      >info_outline</mat-icon
-                    >
-                    {{ 'authentication:password.notice.condition' | ucapI18n }}
-                  </dt>
-                  <dd>
-                    {{ 'authentication:password.notice.condition1' | ucapI18n }}
-                  </dd>
-                  <dd>
-                    {{ 'authentication:password.notice.condition2' | ucapI18n }}
-                  </dd>
-                  <dd>
-                    {{ 'authentication:password.notice.condition3' | ucapI18n }}
-                  </dd>
-                  <dd>
-                    {{ 'authentication:password.notice.condition4' | ucapI18n }}
-                  </dd>
-                  <dd>
-                    {{ 'authentication:password.notice.condition5' | ucapI18n }}
-                  </dd>
-                </dl>
-              </div>
-            </div>
+            <app-authentication-change-password></app-authentication-change-password>
           </div>
         </mat-tab>
       </mat-tab-group>
diff --git a/src/app/dialogs/account/components/settings.dialog.component.scss b/src/app/dialogs/account/components/settings.dialog.component.scss
index fbd800c..a97ee8d 100644
--- a/src/app/dialogs/account/components/settings.dialog.component.scss
+++ b/src/app/dialogs/account/components/settings.dialog.component.scss
@@ -12,10 +12,10 @@
       display: flex;
       flex-direction: column;
       width: 100%;
-      padding: 10px 16px 9px;
+      padding: 10px 16px;
       &:first-of-type {
         border-top: 0;
-        padding: 20px 16px 9px;
+        padding: 20px 16px 10px;
       }
       .title-settings-subject {
         color: #5c444b;
@@ -52,11 +52,11 @@
       .settings-contents {
         ul {
           li {
-            padding: 6px 0 7px;
+            padding: 6px 0;
           }
         }
         .settings-radio-group {
-          padding: 6px 0 7px;
+          padding: 6px 0;
           height: 42px;
           display: flex;
           flex-direction: row;
diff --git a/src/app/dialogs/account/components/settings.dialog.component.ts b/src/app/dialogs/account/components/settings.dialog.component.ts
index a2bf624..4297048 100644
--- a/src/app/dialogs/account/components/settings.dialog.component.ts
+++ b/src/app/dialogs/account/components/settings.dialog.component.ts
@@ -13,17 +13,27 @@ import {
   Inject,
   ViewChild
 } from '@angular/core';
+import { FormControl } from '@angular/forms';
 
 import {
   MatDialogRef,
   MAT_DIALOG_DATA,
   MatDialog
 } from '@angular/material/dialog';
+import { MatOptionSelectionChange } from '@angular/material/core';
 import { MatSelectChange, MatSelect } from '@angular/material/select';
+import { MatCheckboxChange } from '@angular/material/checkbox';
+import { MatRadioChange } from '@angular/material/radio';
 
+import { ObjectUtil } from '@ucap/core';
+import { NotificationMethod } from '@ucap/domain-common';
 import { NativeService, NativeType } from '@ucap/native';
 
 import { UCAP_NATIVE_SERVICE } from '@ucap/ng-native';
+import { I18nService } from '@ucap/ng-i18n';
+import { DateService } from '@ucap/ng-ui/date';
+import { VirtualScrollViewportComponent } from '@ucap/ng-ui/scrolling';
+import { TranslateService } from '@ucap/ng-ui-organization';
 
 import { environment } from '@environments';
 
@@ -34,10 +44,6 @@ import {
   ChatSetting,
   PresenceSetting
 } from '@app/models/settings';
-import { I18nService } from '@ucap/ng-i18n';
-import { VirtualScrollViewportComponent } from '@ucap/ng-ui';
-import { FormControl } from '@angular/forms';
-import { MatOptionSelectionChange } from '@angular/material/core';
 
 export interface TimezoneData {
   displayName: string;
@@ -47,7 +53,9 @@ export interface TimezoneData {
 export interface SettingsDialogData {
   settings: Settings;
 }
-export interface SettingsDialogResult {}
+export interface SettingsDialogResult {
+  settings: Settings;
+}
 
 @Component({
   selector: 'app-sections-account-settings',
@@ -66,10 +74,7 @@ export class SettingsDialogComponent implements OnInit, OnDestroy {
 
   platform: 'browser' | 'electron' = 'electron';
 
-  generalSetting: GeneralSetting;
-  notificationSetting: NotificationSetting;
-  chatSetting: ChatSetting;
-  presenceSetting: PresenceSetting;
+  settings: Settings;
 
   timezoneList: TimezoneData[];
   timezonePlaceholder: string;
@@ -78,15 +83,24 @@ export class SettingsDialogComponent implements OnInit, OnDestroy {
   supportedHrLanguages =
     environment.productConfig.organization.supportedLanguages;
 
+  String = String;
+  NotificationMethod = NotificationMethod;
+
+  private ngOnDestroySubject: Subject<void> = new Subject();
+
   constructor(
     public dialogRef: MatDialogRef<SettingsDialogData, SettingsDialogResult>,
     @Inject(MAT_DIALOG_DATA) public data: SettingsDialogData,
     @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
+    private dateService: DateService,
     private i18nService: I18nService,
+    private translateService: TranslateService,
     private changeDetectorRef: ChangeDetectorRef,
     public matDialog: MatDialog
   ) {
     this.nativeService.platform_nativeType().then((type) => {
+      // this.platform = 'electron';
+      // return;
       switch (type) {
         case NativeType.Browser:
           this.platform = 'browser';
@@ -99,14 +113,9 @@ export class SettingsDialogComponent implements OnInit, OnDestroy {
       }
     });
 
-    this.generalSetting = data.settings.general;
-    this.notificationSetting = data.settings.notification;
-    this.chatSetting = data.settings.chat;
-    this.presenceSetting = data.settings.presence;
+    this.settings = ObjectUtil.deepClone(data.settings);
   }
 
-  private ngOnDestroySubject: Subject<void> = new Subject();
-
   ngOnInit(): void {
     this.generateTimezoneData();
 
@@ -124,9 +133,27 @@ export class SettingsDialogComponent implements OnInit, OnDestroy {
     }
   }
 
-  onSelectionChangeLanguage(event: MatSelectChange) {}
+  onChangeForAutoStartOnBoot(event: MatCheckboxChange) {
+    this.settings.general.autoLaunch = event.checked;
+  }
 
-  onSelectionChangeHrLanguage(event: MatSelectChange) {}
+  onChangeForAutoLogin(event: MatCheckboxChange) {
+    this.settings.general.autoLogin = event.checked;
+  }
+
+  onChangeForAutoHide(event: MatCheckboxChange) {
+    this.settings.general.startupHideWindow = event.checked;
+  }
+
+  onSelectionChangeLanguage(event: MatSelectChange) {
+    this.i18nService.changeLanguage(event.value);
+    this.settings.general.locale = event.value;
+  }
+
+  onSelectionChangeHrLanguage(event: MatSelectChange) {
+    this.translateService.use(event.value);
+    this.settings.general.hrInfoLocale = event.value;
+  }
 
   onOpenedChangeTimezone(opened: boolean) {
     if (opened) {
@@ -139,15 +166,41 @@ export class SettingsDialogComponent implements OnInit, OnDestroy {
     if (!event.isUserInput) {
       return;
     }
+    this.dateService.use(event.source.value);
+    this.settings.general.timezone = event.source.value;
+  }
+
+  onChangeForReceiveNotification(event: MatRadioChange) {
+    const use = 'true' === event.value;
+    console.log('onChangeForReceiveNotification', use);
+  }
+
+  onSelectionChangeMethodOfNotification(event: MatSelectChange) {
+    console.log('onSelectionChangeMethodOfNotification', event.value);
+  }
+
+  onSelectionChangeAlertExposureTimeOfNotification(event: MatSelectChange) {
+    const v = Number(event.value);
+    console.log('onSelectionChangeAlertExposureTimeOfNotification', v);
+  }
+
+  onChangeForReceiveForMessageOfNotification(event: MatCheckboxChange) {
+    console.log('onChangeForReceiveForMessageOfNotification', event.checked);
   }
 
   onClosed(event: MouseEvent): void {
-    this.dialogRef.close();
+    this.dialogRef.close({ settings: this.data.settings });
   }
 
-  onCancel() {}
+  onCancel() {
+    this.dialogRef.close({ settings: this.data.settings });
+  }
 
-  onConfirm() {}
+  onConfirm() {
+    this.dialogRef.close({
+      settings: this.settings
+    });
+  }
 
   private generateTimezoneData() {
     const timezoneData = this.i18nService.t('locale:timezone', {
@@ -159,11 +212,14 @@ export class SettingsDialogComponent implements OnInit, OnDestroy {
       const displayName = `(UTC${moment.tz(name).format('Z')}) ${
         timezoneData[name]
       }`;
+      if (-1 < displayName.indexOf('undefined')) {
+        console.log('timezone', name);
+      }
       timezoneList.push({
         displayName,
         name
       });
-      if (name === this.generalSetting.timezone) {
+      if (name === this.settings.general.timezone) {
         this.timezonePlaceholder = displayName;
       }
     }
@@ -176,12 +232,12 @@ export class SettingsDialogComponent implements OnInit, OnDestroy {
 
   private setTimezoneData() {
     const timezoneIndex = this.timezoneList.findIndex(
-      (t) => t.name === this.generalSetting.timezone
+      (t) => t.name === this.settings.general.timezone
     );
 
     if (-1 !== timezoneIndex) {
       if (!!this.vsTimezone && !!this.selectForTimezone) {
-        this.vsTimezone.scrollToIndex(timezoneIndex);
+        this.vsTimezone.scrollToIndex(timezoneIndex, 'start');
         this.selectForTimezone.value = this.timezoneList[timezoneIndex].name;
       }
     }
diff --git a/src/app/layouts/components/default-dialog.layout.component.html b/src/app/layouts/components/default-dialog.layout.component.html
index 20b6def..d8845d4 100644
--- a/src/app/layouts/components/default-dialog.layout.component.html
+++ b/src/app/layouts/components/default-dialog.layout.component.html
@@ -1,6 +1,6 @@
 <div class="layout-container" fxLayout="column">
   <div class="layout-header" fxFlex="50px" fxLayout="row">
-    <div fxFlex="1 1 auto">
+    <div fxFlex="1 1 auto" class="layout-header-container">
       <ng-content
         class="layout-header-content"
         select="[appLayoutsDefaultDialog='header']"
diff --git a/src/app/layouts/components/default-dialog.layout.component.scss b/src/app/layouts/components/default-dialog.layout.component.scss
index cffb7cb..577f1f6 100644
--- a/src/app/layouts/components/default-dialog.layout.component.scss
+++ b/src/app/layouts/components/default-dialog.layout.component.scss
@@ -10,6 +10,11 @@
     font-size: 1.143em;
     border-bottom: 1px solid #666;
     margin: 0 16px;
+    &-container {
+      flex: 1 1 auto;
+      box-sizing: border-box;
+      width: calc(100% - 30px);
+    }
     .layout-header-content {
       width: 100%;
       height: 100%;
diff --git a/src/app/layouts/components/default.layout.component.html b/src/app/layouts/components/default.layout.component.html
index cd0f482..e2c71e8 100644
--- a/src/app/layouts/components/default.layout.component.html
+++ b/src/app/layouts/components/default.layout.component.html
@@ -1,5 +1,9 @@
-<div class="layout-container" fxLayout="row">
-  <div class="navitab-page" fxFlex="0 0 60px">
+<div
+  class="layout-container"
+  fxLayout="row"
+  [ngClass]="'electron==' ? 'electron' : ''"
+>
+  <div class="navitab-page">
     <div class="gnb">
       <mat-toolbar class="mat-gnb-toolbar"
         ><img
@@ -16,7 +20,7 @@
         class="global-menu"
         (selectedTabChange)="onSelectedTabChange($event)"
       >
-        <mat-tab aria-label="Group">
+        <mat-tab [aria-label]="NavigationType.Group">
           <ng-template mat-tab-label>
             <div
               class="icon-item"
@@ -65,7 +69,7 @@
             </div>
           </ng-template>
         </mat-tab>
-        <mat-tab aria-label="Chat">
+        <mat-tab [aria-label]="NavigationType.Chat">
           <ng-template mat-tab-label>
             <div
               class="icon-item"
@@ -102,7 +106,7 @@
             </div>
           </ng-template>
         </mat-tab>
-        <mat-tab aria-label="Organization">
+        <mat-tab [aria-label]="NavigationType.Organization">
           <ng-template mat-tab-label>
             <div
               class="icon-item"
@@ -158,7 +162,7 @@
           </ng-template>
         </mat-tab>
 
-        <mat-tab aria-label="Message">
+        <!-- <mat-tab [aria-label]="NavigationType.Message">
           <ng-template mat-tab-label>
             <div
               class="icon-item"
@@ -195,9 +199,9 @@
               </svg>
             </div>
           </ng-template>
-        </mat-tab>
+        </mat-tab> -->
 
-        <mat-tab aria-label="Call">
+        <mat-tab [aria-label]="NavigationType.Call">
           <ng-template mat-tab-label>
             <div
               class="icon-item"
@@ -247,6 +251,7 @@
           mode="side"
           opened="true"
           [disableClose]="true"
+          (openedChange)="onOpenStart($event)"
         >
           <ucap-float-action-button
             *ngIf="fabButtonShow"
@@ -254,7 +259,10 @@
             [useCustomDefaultIcon]="fabUseCustomDefaultIcon"
             (buttonClick)="onClickFab($event)"
           >
-            <div *ngIf="tabIndex === 'group'" ucapFloatActionButton="mainIcon">
+            <div
+              *ngIf="curNavi === NavigationType.Group"
+              ucapFloatActionButton="mainIcon"
+            >
               <mat-icon class="ico-font-float">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
@@ -303,7 +311,10 @@
                 </svg>
               </mat-icon>
             </div>
-            <div *ngIf="tabIndex === 'chat'" ucapFloatActionButton="mainIcon">
+            <div
+              *ngIf="curNavi === NavigationType.Chat"
+              ucapFloatActionButton="mainIcon"
+            >
               <mat-icon class="ico-font-float">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
@@ -341,7 +352,7 @@
               </mat-icon>
             </div>
             <div
-              *ngIf="tabIndex === 'message'"
+              *ngIf="curNavi === NavigationType.Message"
               ucapFloatActionButton="mainIcon"
             >
               <mat-icon class="ico-font-float">
@@ -381,7 +392,10 @@
                 </svg>
               </mat-icon>
             </div>
-            <div *ngIf="tabIndex === 'call'" ucapFloatActionButton="mainIcon">
+            <div
+              *ngIf="curNavi === NavigationType.Call"
+              ucapFloatActionButton="mainIcon"
+            >
               <mat-icon class="ico-font-dialpad">dialpad</mat-icon>
             </div>
           </ucap-float-action-button>
@@ -400,8 +414,10 @@
             <div class="content-sidenav-top-bar" fxFlex="0 0 40px">
               <app-layouts-top-bar>
                 <div class="content-sidenav-top-bar-content">
-                  <div class="toolbar-info-area date-info">
-                    <span>Today</span>{{ moment().format('YYYY.MM.DD') }}
+                  <div class="toolbar-info-area date-info toolbar-drag-area">
+                    <div class="today">
+                      <span>Today</span>{{ moment().format('YYYY.MM.DD') }}
+                    </div>
                   </div>
                   <div class="toolbar-info-area toolbar-ctrl">
                     <!--Search-->
@@ -418,15 +434,12 @@
                     <!--My Profile -->
                     <div
                       class="my-profile"
-                      matTooltip="프로필 버튼"
-                      matTooltipPosition="below"
-                      matTooltipHideDelay="1000"
                       [matMenuTriggerFor]="profileMenu"
                       #profileMenuTrigger="matMenuTrigger"
                     >
                       <app-organization-profile-image-01
                         [userInfo]="user.info"
-                        [versionInfo]="versionInfo2Res"
+                        [versionInfo]="versionInfo"
                         (openProfile)="onOpenProfile($event)"
                       ></app-organization-profile-image-01>
                     </div>
@@ -445,7 +458,9 @@
       <!--Footer-->
       <div class="footer">
         <div class="foot-info version-info">
-          <span class="var-txt current-ver">현재버전 0.0.11</span>
+          <span class="var-txt current-ver" (click)="onClickForOpenRoom()"
+            >현재버전 0.0.11</span
+          >
           <span class="var-txt new-var">최신버전 0.0.11 </span>
           <button mat-icon-button aria-label="icon">
             <mat-icon>get_app</mat-icon>
diff --git a/src/app/layouts/components/default.layout.component.scss b/src/app/layouts/components/default.layout.component.scss
index 68102d8..08b85ca 100644
--- a/src/app/layouts/components/default.layout.component.scss
+++ b/src/app/layouts/components/default.layout.component.scss
@@ -8,13 +8,23 @@
 .layout-container {
   width: 100%;
   height: 100%;
+  &.electron {
+    border: 1px solid #aaa;
+  }
 
   .navitab-page {
     //GNB /////////////////////////////////////
+    display: flex;
+    flex: 0 0 auto;
+    width: 60px;
+    @include screen(xs) {
+      width: 60px;
+    }
+
     .gnb {
       //background-color: $gray-ref0;
       background-color: #f1f2f6;
-      width: 60px;
+      width: 100%;
       height: 100%;
       display: flex;
       flex-direction: column;
@@ -25,7 +35,7 @@
         flex-basis: 40px;
         padding: 2px 12px 10px;
         .img-logo {
-          margin: 6px 0 0 1px;
+          margin: 10px 0 0 1px;
         }
       }
       .left-container {
@@ -62,7 +72,7 @@
             content: '';
             width: 30px;
             height: 30px;
-            background-image: url(../../../assets/images/ico/btn_gnb_hompage.svg);
+            background-image: url(/assets/images/ico/btn_gnb_hompage.svg);
             background-size: 30px;
             display: block;
             position: absolute;
@@ -112,6 +122,9 @@
               display: flex;
               align-items: center;
               padding: 0 16px;
+              -webkit-app-region: drag;
+              -webkit-touch-callout: none;
+              -webkit-user-select: none;
             }
           }
         }
@@ -134,36 +147,53 @@
                 justify-content: space-between;
                 .toolbar-info-area {
                   display: flex;
-                  flex-grow: 1;
                   align-items: center;
+                  &.toolbar-drag-area {
+                    -webkit-app-region: drag;
+                    -webkit-touch-callout: none;
+                    -webkit-user-select: none;
+                  }
                   &.date-info {
                     @include font-family($font-light);
                     font-weight: 600;
                     font-size: 12px;
                     color: $gray-re70;
+                    display: flex;
+                    flex: 1 1 auto;
                     padding-left: 30px;
+                    height: 100%;
                     @include screen(mid) {
                       padding-left: 16px;
-                      display: none;
                     }
-                    span {
-                      width: 54px;
-                      height: 16px;
-                      border-radius: 30px;
-                      border: solid 1px $lipstick;
-                      background-color: #ffffff;
-                      font-size: 11px;
-
+                    .today {
                       display: flex;
+                      flex-direction: row;
                       align-items: center;
-                      justify-content: center;
-                      color: $lipstick;
-                      margin-right: 8px;
+                      span {
+                        width: 54px;
+                        height: 16px;
+                        border-radius: 30px;
+                        border: solid 1px $lipstick;
+                        background-color: #ffffff;
+                        font-size: 11px;
+
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        color: $lipstick;
+                        margin-right: 8px;
+                      }
+                      @include screen(mid) {
+                        display: none;
+                      }
                     }
                   }
                   &.toolbar-ctrl {
                     flex-flow: row-reverse;
+                    margin-left: auto;
                     .topbar-search {
+                      //개발예정으로 개발후 오픈
+                      display: none;
                       order: 2;
                       margin-right: 8px;
                       .ico-search-icon {
@@ -175,8 +205,8 @@
                       }
                     }
                     .my-profile {
-                      height: 30px;
-                      width: 30px;
+                      height: 28px;
+                      width: 28px;
                       margin-right: 20px;
                       order: 1;
                       //profile /////////////
@@ -239,6 +269,7 @@
           @include font-family($font-light);
           font-weight: 600;
           &.version-info {
+            display: none;
             .var-txt {
               padding-left: 8px;
               color: $gray-re70;
diff --git a/src/app/layouts/components/default.layout.component.ts b/src/app/layouts/components/default.layout.component.ts
index f432c37..4fb7298 100644
--- a/src/app/layouts/components/default.layout.component.ts
+++ b/src/app/layouts/components/default.layout.component.ts
@@ -3,7 +3,7 @@ import moment from 'moment';
 import { Subject, of } from 'rxjs';
 import { takeUntil, filter, take, map, catchError } from 'rxjs/operators';
 
-import { Component, ViewChild, OnDestroy, OnInit } from '@angular/core';
+import { Component, ViewChild, OnDestroy, OnInit, Inject } from '@angular/core';
 import {
   Router,
   RouterEvent,
@@ -20,23 +20,43 @@ import { MatMenuTrigger } from '@angular/material/menu';
 import { MatTabChangeEvent, MatTabGroup } from '@angular/material/tabs';
 import { MatSidenav } from '@angular/material/sidenav';
 
-import { VersionInfo2Response } from '@ucap/api-public';
-import { UserInfoSS } from '@ucap/protocol-query';
+import { User, UserInfoSS } from '@ucap/domain-organization';
 
 import { LogService } from '@ucap/ng-logger';
 import { UserSelector } from '@ucap/ng-store-organization';
 import { ConfigurationSelector } from '@ucap/ng-store-authentication';
 import { RoomSelector } from '@ucap/ng-store-chat';
 
-import { AppSelector } from '@app/store/state';
-import { AppChatService } from '@app/services/app-chat.service';
 import { QueryParams as ChatQueryParams } from '@app/pages/chat/types/params.type';
-import { CreateDialogComponent } from '@app/sections/group/dialogs/create.dialog.component';
 import { AppAccountService } from '@app/services/app-account.service';
+import { AppCallService } from '@app/services/app-call.service';
+import { AppUiService } from '@app/services/app-ui.service';
 import { QueryParams as OrganizationParams } from '@app/pages/organization/types/params.type';
-import { User } from '@ucap/protocol-info';
+import { AddUserDialogComponent } from '@app/sections/group/dialogs/add-user.dialog.component';
+import {
+  CreateDialogComponent as ChatCreateDialogComponent,
+  CreateDialogData as ChatCreateDialogData,
+  CreateDialogResult as ChatCreateDialogResult
+} from '@app/sections/chat/dialogs/create.dialog.component';
+import { UCAP_NATIVE_SERVICE } from '@ucap/ng-native';
+import { NativeService } from '@ucap/native';
+import { AppActions } from '@app/store/actions';
+import { NavigationType } from '@app/types';
+import { I18nService } from '@ucap/ng-i18n';
+import {
+  DialpadDialogComponent,
+  DialpadDialogData,
+  DialpadDialogResult
+} from '@app/sections/call/dialogs/dialpad.dialog.component';
+import { VersionInfo } from '@ucap/domain-authentication';
 
-const NAVS = ['group', 'chat', 'organization', 'message'];
+const NAVS = [
+  NavigationType.Group,
+  NavigationType.Chat,
+  NavigationType.Organization,
+  NavigationType.Message,
+  NavigationType.Call
+];
 
 @Component({
   selector: 'app-layouts-default',
@@ -48,16 +68,21 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy {
   navTabGroup: MatTabGroup;
 
   @ViewChild('leftSidenav', { static: true })
-  leftSidenav: MatSidenav;
-
-  isShowLeftSideNav = false;
+  set leftSidenav(leftSidenav: MatSidenav) {
+    this._leftSidenav = leftSidenav;
+    this.appUiService.leftSidenav = leftSidenav;
+  }
+  get leftSidenav(): MatSidenav {
+    return this._leftSidenav;
+  }
+  // tslint:disable-next-line: variable-name
+  _leftSidenav: MatSidenav;
 
   @ViewChild('profileMenuTrigger', { static: true })
   profileMenuTrigger: MatMenuTrigger;
 
   showStatusbar = true;
 
-  tabIndex: string;
   queryParams: Params;
 
   unreadCountChat = 0;
@@ -66,23 +91,30 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy {
   fabButtonShow = true;
   fabUseCustomDefaultIcon = true; // default in this prj
   fabButtons: { icon: string; tooltip?: string; divisionType?: string }[];
-  versionInfo2Res: VersionInfo2Response;
+  versionInfo: VersionInfo;
   user: User;
 
+  /** Navigation */
+  NavigationType = NavigationType;
+  initMenu = NavigationType.Group;
+  curNavi: NavigationType;
+
   moment = moment;
 
   private ngOnDestroySubject: Subject<void> = new Subject();
-
   constructor(
     private router: Router,
+    private i18nSevice: I18nService,
     private activatedRoute: ActivatedRoute,
     private store: Store<any>,
     private appAccountService: AppAccountService,
-    private appChatService: AppChatService,
+    private appCallService: AppCallService,
+    private appUiService: AppUiService,
     private logService: LogService,
-    public dialog: MatDialog
+    public dialog: MatDialog,
+    @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService
   ) {
-    this.setFabInitial(NAVS[0]);
+    this.setFabInitial(this.initMenu);
     this.router.events
       .pipe(
         takeUntil(this.ngOnDestroySubject),
@@ -97,7 +129,7 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy {
               if (!p || !p.segments || 0 === p.segments.length) {
                 break;
               }
-              const index = p.segments[0].path;
+              const index = p.segments[0].path as NavigationType;
               this.setTabGroup(index);
               this.setFabInitial(index);
             }
@@ -116,32 +148,14 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy {
     this.store
       .pipe(
         takeUntil(this.ngOnDestroySubject),
-        select(ConfigurationSelector.versionInfo2Response)
+        select(ConfigurationSelector.versionInfo)
       )
-      .subscribe((versionInfo2Res) => {
-        this.versionInfo2Res = versionInfo2Res;
+      .subscribe((versionInfo) => {
+        this.versionInfo = versionInfo;
       });
   }
 
   ngOnInit(): void {
-    this.store
-      .pipe(takeUntil(this.ngOnDestroySubject), select(AppSelector.windowSize))
-      .subscribe((size) => {
-        if (size.width < 780) {
-          if (this.leftSidenav.opened) {
-            this.leftSidenav.close();
-          }
-          this.isShowLeftSideNav = false;
-          this.leftSidenav.mode = 'over';
-        } else {
-          if (!this.leftSidenav.opened) {
-            this.leftSidenav.open();
-          }
-          this.isShowLeftSideNav = true;
-          this.leftSidenav.mode = 'side';
-        }
-      });
-
     this.store
       .pipe(takeUntil(this.ngOnDestroySubject), select(UserSelector.user))
       .subscribe((user) => {
@@ -156,6 +170,31 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy {
       .subscribe((unreadTotal) => {
         this.unreadCountChat = unreadTotal;
       });
+
+    // this.store
+    //   .pipe(
+    //     takeUntil(this.ngOnDestroySubject),
+    //     select(PresenceSelector.selectAllStatusBulkInfo)
+    //   )
+    //   .subscribe((allBulkInfo) => {
+    //     // .includes(String(this.user.info.seq))
+    //     if (!allBulkInfo || (!!allBulkInfo && allBulkInfo.length === 0)) {
+    //       return;
+    //     }
+    //     const userStatusinfo = allBulkInfo.filter(
+    //       (bulkInfo) => bulkInfo.userSeq === String(this.user.info.seq)
+    //     )[0];
+
+    //     const status = PresenceUtil.isOnline(userStatusinfo, PresenceType.PC);
+    //     if (!status && userStatusinfo.pcStatus === StatusCode.Offline) {
+    //       this.store.dispatch(
+    //         PresenceActions.bulkInfo({
+    //           divCd: 'myBulk',
+    //           userSeqs: [String(this.user.info.seq)]
+    //         })
+    //       );
+    //     }
+    //   });
   }
 
   ngOnDestroy(): void {
@@ -170,14 +209,13 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy {
   }
 
   onSelectedTabChange(event: MatTabChangeEvent) {
-    const commands: any = [
-      NAVS[event.index],
-      { outlets: { content: 'index' } }
-    ];
+    const naviMenu: NavigationType = event.tab.ariaLabel as NavigationType;
+    const commands: any = [naviMenu, { outlets: { content: 'index' } }];
     const orgInitialParams: Params = {};
 
+    // CASE :: Chat.
     if (
-      event.index === 1 && // is chat.
+      naviMenu === NavigationType.Chat && // is chat.
       !!this.queryParams &&
       !!this.queryParams[ChatQueryParams.ROOM_ID]
     ) {
@@ -185,55 +223,45 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy {
       this.queryParams = undefined;
       return;
     }
-    // if (!!this.tabIndex && this.tabIndex === 'chat') {
-    //   if (!!this.queryParams && !!this.queryParams[ChatQueryParams.ROOM_ID]) {
-    //     return;
-    //   } else {
 
-    //   }
-    // } else {
-    // }
-
-    if (event.index === 2 && !!this.user) {
+    // CASE :: Organization.
+    if (naviMenu === NavigationType.Organization && !!this.user) {
       orgInitialParams[OrganizationParams.DEPT_SEQ] = String(
         this.user.departmentCode
       );
     }
+
     this.router.navigate(commands, { queryParams: orgInitialParams });
-    if (!this.isShowLeftSideNav) {
-      this.leftSidenav.open();
-    }
-    this.setFabInitial(NAVS[event.index]);
+    this.appUiService.openLeftSidenavOnNarrowMode();
+    this.setFabInitial(naviMenu);
   }
 
   onClickToggleLeftSidenav() {
-    if (!this.isShowLeftSideNav) {
-      this.leftSidenav.toggle();
-    }
+    this.appUiService.toggleLeftSidenavOnNarrowMode();
   }
 
-  setFabInitial(type: string) {
-    this.tabIndex = type;
+  setFabInitial(type: NavigationType) {
+    this.curNavi = type;
     switch (type) {
-      case 'group':
+      case NavigationType.Group:
         {
           this.fabButtonShow = true;
           this.fabButtons = [
             {
               icon: 'add',
-              tooltip: '그룹 추가',
+              tooltip: this.i18nSevice.t('group:dialog.title.addNewBuddy'),
               divisionType: 'GROUP_NEW_ADD'
             }
           ];
         }
         break;
-      case 'chat':
+      case NavigationType.Chat:
         {
           this.fabButtonShow = true;
           this.fabButtons = [
             {
               icon: 'chat',
-              tooltip: '대화 추가',
+              tooltip: this.i18nSevice.t('chat:dialog.title.newChatRoom'),
               divisionType: 'CAHT_NEW_ADD'
             }
           ];
@@ -247,12 +275,12 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy {
           // }
         }
         break;
-      case 'organization':
+      case NavigationType.Organization:
         {
           this.fabButtonShow = false;
         }
         break;
-      case 'message':
+      case NavigationType.Message:
         {
           this.fabButtonShow = true;
           this.fabButtons = [
@@ -264,11 +292,18 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy {
           ];
         }
         break;
-      // case MainMenu.Call:
-      //   {
-      //     this.fabButtonShow = false;
-      //   }
-      //   break;
+      case NavigationType.Call:
+        {
+          this.fabButtonShow = true;
+          this.fabButtons = [
+            {
+              icon: 'dialpad',
+              tooltip: this.i18nSevice.t('call:label.dialpad'),
+              divisionType: 'OPEN_DIALPAD'
+            }
+          ];
+        }
+        break;
 
       default: {
         this.fabButtonShow = false;
@@ -286,10 +321,14 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy {
     switch (btn.divisionType) {
       case 'GROUP_NEW_ADD':
         {
-          const dialogRef = this.dialog.open(CreateDialogComponent, {
+          const dialogRef = this.dialog.open(AddUserDialogComponent, {
             panelClass: 'max-create-dialog'
           });
 
+          dialogRef
+            .afterOpened()
+            .pipe(take(1))
+            .subscribe(() => dialogRef.componentInstance.psUpdate());
           dialogRef
             .afterClosed()
             .pipe(
@@ -304,7 +343,14 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy {
         break;
       case 'CAHT_NEW_ADD':
         {
-          this.appChatService.newOpenRoomDialog();
+          const dialogRef = this.dialog.open<
+            ChatCreateDialogComponent,
+            ChatCreateDialogData,
+            ChatCreateDialogResult
+          >(ChatCreateDialogComponent, {
+            panelClass: 'max-create-dialog',
+            data: {}
+          });
         }
         break;
       case 'CHAT_NEW_TIMER_ADD':
@@ -320,6 +366,19 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy {
           this.logService.debug('MESSAGE_NEW');
         }
         break;
+
+      case 'OPEN_DIALPAD':
+        {
+          this.dialog.open<
+            DialpadDialogComponent,
+            DialpadDialogData,
+            DialpadDialogResult
+          >(DialpadDialogComponent, {
+            panelClass: 'mid-create-dialog',
+            data: {}
+          });
+        }
+        break;
     }
   }
 
@@ -350,9 +409,21 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy {
     this.profileMenuTrigger.closeMenu();
   }
 
+  onClickForOpenRoom() {
+    this.nativeService.chat_openRoom('/chat/chatroom?roomId=1000');
+  }
+
   private setTabGroup(url: string) {
     if (!!this.navTabGroup) {
       this.navTabGroup.selectedIndex = NAVS.findIndex((v) => url === v);
     }
   }
+
+  onOpenStart(opened: boolean) {
+    this.store.dispatch(
+      AppActions.openedLiftSideNav({
+        opened
+      })
+    );
+  }
 }
diff --git a/src/app/layouts/components/no-navi.layout.component.html b/src/app/layouts/components/no-navi.layout.component.html
index 91a8275..7e11e9c 100644
--- a/src/app/layouts/components/no-navi.layout.component.html
+++ b/src/app/layouts/components/no-navi.layout.component.html
@@ -1,6 +1,6 @@
 <div class="layout-container" fxFlexFill fxLayout="column">
   <div *ngIf="showTopbar" class="top-bar" fxFlex="50px">
-    <app-layouts-top-bar></app-layouts-top-bar>
+    <app-layouts-top-bar class="no-navi-top-bar"></app-layouts-top-bar>
   </div>
   <div class="layout-content" fxFlex="1 1 auto">
     <router-outlet></router-outlet>
diff --git a/src/app/layouts/components/top-bar.component.html b/src/app/layouts/components/top-bar.component.html
index 9770328..9878a36 100644
--- a/src/app/layouts/components/top-bar.component.html
+++ b/src/app/layouts/components/top-bar.component.html
@@ -1,9 +1,10 @@
 <div class="title-bar">
   <ucap-title-bar
     [platform]="platform"
-    (closed)="onClosedTitleBar()"
-    (maximized)="onMaximizedTitleBar()"
-    (minimized)="onMinimizedTitleBar()"
+    [windowState]="windowState"
+    (closed)="onClosed()"
+    (maximized)="onMaximized($event)"
+    (minimized)="onMinimized()"
   >
     <ng-content></ng-content>
   </ucap-title-bar>
diff --git a/src/app/layouts/components/top-bar.component.ts b/src/app/layouts/components/top-bar.component.ts
index fa193e8..bf797e7 100644
--- a/src/app/layouts/components/top-bar.component.ts
+++ b/src/app/layouts/components/top-bar.component.ts
@@ -67,9 +67,15 @@ export class TopBarComponent implements OnInit, OnDestroy {
     }
   }
 
-  onClosedTitleBar() {}
+  onClosed() {
+    this.nativeService.window_close();
+  }
 
-  onMaximizedTitleBar() {}
+  onMaximized(altKey: boolean) {
+    this.nativeService.window_maximize(altKey);
+  }
 
-  onMinimizedTitleBar() {}
+  onMinimized() {
+    this.nativeService.window_minimize();
+  }
 }
diff --git a/src/app/layouts/layouts.module.ts b/src/app/layouts/layouts.module.ts
index 932e697..a800414 100644
--- a/src/app/layouts/layouts.module.ts
+++ b/src/app/layouts/layouts.module.ts
@@ -18,7 +18,9 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 
 import { I18nModule, UCAP_I18N_NAMESPACE } from '@ucap/ng-i18n';
-import { UiModule } from '@ucap/ng-ui';
+
+import { UiButtonModule } from '@ucap/ng-ui/button';
+import { UiNativeModule } from '@ucap/ng-ui/native';
 
 import { AppOrganizationModule } from '@app/ucap/organization/organization.module';
 
@@ -45,7 +47,9 @@ import { DIALOGS } from './dialogs';
     PerfectScrollbarModule,
 
     I18nModule,
-    UiModule,
+
+    UiButtonModule,
+    UiNativeModule,
 
     AppOrganizationModule
   ],
diff --git a/src/app/models/group-open-info.ts b/src/app/models/group-open-info.ts
index 342c265..33f80e5 100644
--- a/src/app/models/group-open-info.ts
+++ b/src/app/models/group-open-info.ts
@@ -1,4 +1,7 @@
+import { SortViewType } from '@app/pages/group/types/sort-view.type';
+
 export interface GroupOpenInfo {
   lastGroupSeq: number;
   groupSeqs: number[];
+  showType: SortViewType;
 }
diff --git a/src/app/models/login-session.ts b/src/app/models/login-session.ts
index 2645a78..fa79584 100644
--- a/src/app/models/login-session.ts
+++ b/src/app/models/login-session.ts
@@ -1,4 +1,4 @@
-import { LoginSession as UCAPLoginSession } from '@ucap/core';
+import { LoginSession as UCAPLoginSession } from '@ucap/domain-authentication';
 import { GroupOpenInfo } from './group-open-info';
 
 export interface LoginSession extends UCAPLoginSession {
diff --git a/src/app/models/settings.ts b/src/app/models/settings.ts
index ff9c0db..08e9906 100644
--- a/src/app/models/settings.ts
+++ b/src/app/models/settings.ts
@@ -1,9 +1,9 @@
 import {
   GeneralSetting as UCAPGeneralSetting,
-  NotificationSetting as UCAPNotificationSetting,
-  ChatSetting as UCAPChatSetting,
-  PresenceSetting as UCAPPresenceSetting
-} from '@ucap/protocol-option';
+  NotificationSetting as UCAPNotificationSetting
+} from '@ucap/domain-common';
+import { PresenceSetting as UCAPPresenceSetting } from '@ucap/domain-status';
+import { ChatSetting as UCAPChatSetting } from '@ucap/domain-chat';
 
 // tslint:disable-next-line: no-empty-interface
 export interface GeneralSetting extends UCAPGeneralSetting {}
diff --git a/src/app/models/user-store.ts b/src/app/models/user-store.ts
index 88de2af..fc3990a 100644
--- a/src/app/models/user-store.ts
+++ b/src/app/models/user-store.ts
@@ -1,4 +1,4 @@
-import { UserStore as UCAPUserStore } from '@ucap/core';
+import { UserStore as UCAPUserStore } from '@ucap/domain-authentication';
 
 import { Settings } from './settings';
 
diff --git a/src/app/pages/account/components/login.page.component.scss b/src/app/pages/account/components/login.page.component.scss
index 1ec2761..e5f564e 100644
--- a/src/app/pages/account/components/login.page.component.scss
+++ b/src/app/pages/account/components/login.page.component.scss
@@ -14,25 +14,25 @@ $login-bg-h: 100/1080;
   justify-content: center;
 
   background-color: $bg-gray;
-  background-image: url(../../../../assets/images/bg/bg_login_circle_square01.svg),
-    url(../../../../assets/images/bg/bg_login_circle_stroke01.svg),
-    url(../../../../assets/images/bg/bg_login_circle01.svg),
-    url(../../../../assets/images/bg/bg_login_circle03.svg),
-    url(../../../../assets/images/bg/bg_login_circle_diagonal01.svg),
-    url(../../../../assets/images/bg/bg_login_circle_square02.svg),
-    url(../../../../assets/images/bg/bg_login_circle04.svg),
-    url(../../../../assets/images/bg/bg_login_circle05.svg),
-    url(../../../../assets/images/bg/bg_login_circle06.svg),
-    url(../../../../assets/images/bg/bg_login_circle07.svg),
-    url(../../../../assets/images/bg/bg_login_circle08.svg),
-    url(../../../../assets/images/bg/bg_login_circle_diagonal02.svg),
-    url(../../../../assets/images/bg/bg_login_circle_diagonal03.svg),
-    url(../../../../assets/images/bg/bg_login_circle_stroke02.svg),
-    url(../../../../assets/images/bg/bg_login_circle_stroke03.svg),
-    url(../../../../assets/images/bg/bg_login_circle_stroke04.svg),
-    url(../../../../assets/images/bg/bg_login_circle_stroke05.svg),
-    url(../../../../assets/images/bg/bg_login_polygon01.svg),
-    url(../../../../assets/images/bg/bg_login_polygon02.svg);
+  background-image: url(/assets/images/bg/bg_login_circle_square01.svg),
+    url(/assets/images/bg/bg_login_circle_stroke01.svg),
+    url(/assets/images/bg/bg_login_circle01.svg),
+    url(/assets/images/bg/bg_login_circle03.svg),
+    url(/assets/images/bg/bg_login_circle_diagonal01.svg),
+    url(/assets/images/bg/bg_login_circle_square02.svg),
+    url(/assets/images/bg/bg_login_circle04.svg),
+    url(/assets/images/bg/bg_login_circle05.svg),
+    url(/assets/images/bg/bg_login_circle06.svg),
+    url(/assets/images/bg/bg_login_circle07.svg),
+    url(/assets/images/bg/bg_login_circle08.svg),
+    url(/assets/images/bg/bg_login_circle_diagonal02.svg),
+    url(/assets/images/bg/bg_login_circle_diagonal03.svg),
+    url(/assets/images/bg/bg_login_circle_stroke02.svg),
+    url(/assets/images/bg/bg_login_circle_stroke03.svg),
+    url(/assets/images/bg/bg_login_circle_stroke04.svg),
+    url(/assets/images/bg/bg_login_circle_stroke05.svg),
+    url(/assets/images/bg/bg_login_polygon01.svg),
+    url(/assets/images/bg/bg_login_polygon02.svg);
   background-repeat: no-repeat;
   background-position: unquote($login-bg-w * 323 + '%')
       unquote($login-bg-h * 179 + '%'),
diff --git a/src/app/pages/account/components/logout.page.component.html b/src/app/pages/account/components/logout.page.component.html
index d6bcfb8..1ab852c 100644
--- a/src/app/pages/account/components/logout.page.component.html
+++ b/src/app/pages/account/components/logout.page.component.html
@@ -1 +1,22 @@
-<div class="logout-container">Logout</div>
+<div class="logout-container">
+  <div class="logout-content">
+    <div class="logout-title"></div>
+
+    <p class="guide-text">
+      서비스를 이용하시려면 다시 로그인하여 주시기 바랍니다.<br />
+      <span
+        >항상 더 좋은 서비스로 고객님께 보답하는 M-Messenger가 되겠습니다.</span
+      >
+    </p>
+
+    <!--<p class="guide-text">
+      다른 기기에서 동일한 계정으로 로그인되었습니다.<br />본인이 아닌 경우
+      비밀번호 변경을 하시기 바랍니다.
+      <span
+        >항상 더 좋은 서비스로 고객님께 보답하는 M-Messenger가 되겠습니다.</span
+      >
+    </p>-->
+
+    <span class="guide-move">OO초 후 로그인 페이지로 자동 이동 됩니다 </span>
+  </div>
+</div>
diff --git a/src/app/pages/account/components/logout.page.component.scss b/src/app/pages/account/components/logout.page.component.scss
index 294bf9b..3236575 100644
--- a/src/app/pages/account/components/logout.page.component.scss
+++ b/src/app/pages/account/components/logout.page.component.scss
@@ -3,4 +3,57 @@
 .logout-container {
   width: 100%;
   height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #f3f4f5;
+  background-image: url(/assets/images/ico/img_logout.png);
+  background-position: 50% bottom;
+  background-repeat: no-repeat;
+  background-size: 90% auto;
+  @include screen(xs) {
+    background-size: 100% auto;
+  }
+
+  .logout-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    max-width: 80%;
+    transform: translateY(-70%);
+    .logout-title {
+      display: block;
+      width: 250px;
+      height: 62px;
+      text-align: center;
+      background: url(/assets/images/ico/img_logout_text.svg);
+    }
+
+    .guide-text {
+      font-size: 1.6em;
+      color: #666;
+      font-weight: 600;
+      text-align: center;
+      @include screen(xs) {
+        font-size: 1.4em;
+      }
+
+      span {
+        display: inline-flex;
+        font-size: 0.7em;
+        color: #999;
+        font-weight: normal;
+        margin-top: 0.7em;
+      }
+    }
+
+    .guide-move {
+      display: inline-flex;
+      padding: 0.8em 1.4em;
+      border-radius: 100px;
+      background-color: #fd578a;
+      color: #ffffff;
+    }
+  }
 }
diff --git a/src/app/pages/call/call-routing.page.module.ts b/src/app/pages/call/call-routing.page.module.ts
index 5ec90d3..ca63400 100644
--- a/src/app/pages/call/call-routing.page.module.ts
+++ b/src/app/pages/call/call-routing.page.module.ts
@@ -3,12 +3,19 @@ import { Routes, RouterModule } from '@angular/router';
 
 import { IndexPageComponent } from './components/index.page.component';
 import { SidenavPageComponent } from './components/sidenav.page.component';
+import { CallHistoryPageComponent } from './components/call-history.page.component';
 
 const routes: Routes = [
   {
     path: 'index',
     outlet: 'content',
-    component: IndexPageComponent
+    // component: IndexPageComponent
+    component: CallHistoryPageComponent
+  },
+  {
+    path: 'callhistory',
+    outlet: 'content',
+    component: CallHistoryPageComponent
   },
   {
     path: '',
diff --git a/src/app/pages/call/call.page.module.ts b/src/app/pages/call/call.page.module.ts
index efac5ff..2522afe 100644
--- a/src/app/pages/call/call.page.module.ts
+++ b/src/app/pages/call/call.page.module.ts
@@ -3,18 +3,52 @@ import { CommonModule } from '@angular/common';
 
 import { FlexLayoutModule } from '@angular/flex-layout';
 
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTabsModule } from '@angular/material/tabs';
+
+import { UiDateModule } from '@ucap/ng-ui/date';
+import { UiPhoneModule } from '@ucap/ng-ui/phone';
+
+import { I18nModule, UCAP_I18N_NAMESPACE } from '@ucap/ng-i18n';
+import { OrganizationUiModule } from '@ucap/ng-ui-organization';
+
+import { AppOrganizationModule } from '@app/ucap/organization/organization.module';
+import { AppCallSectionModule } from '@app/sections/call/call.section.module';
+
 import { AppCallRoutingPageModule } from './call-routing.page.module';
-
-import { IndexPageComponent } from './components/index.page.component';
-import { SidenavPageComponent } from './components/sidenav.page.component';
-
-export const COMPONENTS = [IndexPageComponent, SidenavPageComponent];
-
-export { IndexPageComponent, SidenavPageComponent };
+import { COMPONENTS } from './components';
+import { AppGroupModule } from '@app/ucap/group/group.module';
 
 @NgModule({
-  imports: [CommonModule, FlexLayoutModule, AppCallRoutingPageModule],
+  imports: [
+    CommonModule,
+    FlexLayoutModule,
+
+    MatButtonModule,
+    MatIconModule,
+    MatTabsModule,
+
+    I18nModule,
+
+    UiDateModule,
+    UiPhoneModule,
+
+    OrganizationUiModule,
+
+    AppOrganizationModule,
+
+    AppCallSectionModule,
+    AppCallRoutingPageModule,
+    AppGroupModule
+  ],
   declarations: [...COMPONENTS],
-  entryComponents: []
+  entryComponents: [],
+  providers: [
+    {
+      provide: UCAP_I18N_NAMESPACE,
+      useValue: ['call', 'common']
+    }
+  ]
 })
 export class AppCallPageModule {}
diff --git a/src/app/pages/call/components/call-history.page.component.html b/src/app/pages/call/components/call-history.page.component.html
new file mode 100644
index 0000000..8ed7585
--- /dev/null
+++ b/src/app/pages/call/components/call-history.page.component.html
@@ -0,0 +1,58 @@
+<div class="contents-main" fxFlexFill fxLayout="column">
+  <div class="subtitle" fxFlex="0 0 50px" fxLayout="row">
+    <div class="title">{{ 'call:label.callHistory' | ucapI18n }}</div>
+    <div class="call-info" fxLayout="row">
+      <div class="info send">
+        <mat-icon>call_made</mat-icon>{{ 'call:label.send' | ucapI18n }}
+      </div>
+      <div class="info receive">
+        <mat-icon>call_received</mat-icon>{{ 'call:label.recieve' | ucapI18n }}
+      </div>
+      <div class="info away">
+        <mat-icon>call_missed</mat-icon>{{ 'call:label.missed' | ucapI18n }}
+      </div>
+      <div class="info unanswered">
+        <mat-icon>call_missed_outgoing</mat-icon
+        >{{ 'call:label.unanswered' | ucapI18n }}
+      </div>
+    </div>
+  </div>
+  <div class="user-title" fxFlex="0 0 90px" fxLayout="row">
+    <div class="user-profile-info">
+      <div class="profile-image">
+        <app-group-profile-image-01
+          [userInfo]="userInfo"
+          [versionInfo]="versionInfo"
+          (openProfile)="onOpenProfile($event)"
+        ></app-group-profile-image-01>
+      </div>
+      <div class="user-info">
+        <div class="user-n-g">
+          <div class="user-name">
+            {{ userInfo | ucapOrganizationTranslate: 'name':undefined:'' }}
+          </div>
+          <div class="user-grade">
+            {{ userInfo | ucapOrganizationTranslate: 'grade':undefined:' ' }}
+          </div>
+        </div>
+        <div class="dept-name">
+          {{ userInfo | ucapOrganizationTranslate: 'deptName':undefined:' ' }}
+        </div>
+      </div>
+    </div>
+    <div class="user-call-info" fxLayout="row">
+      <div *ngIf="!!userInfo && !!userInfo.hpNumber" class="mobile">
+        {{ userInfo.hpNumber | ucapPhoneNumber }}
+        <img src="assets/images/ico/btn_list_mobile_a24.svg" alt="" />
+      </div>
+      <div *ngIf="!!userInfo && !!userInfo.lineNumber" class="lineNumber">
+        {{ userInfo.lineNumber | ucapPhoneNumber }}
+        <img src="assets/images/ico/btn_list_call_a24.svg" alt="" />
+      </div>
+    </div>
+  </div>
+
+  <div class="call-info-container" fxFlex="1 1 auto">
+    <app-sections-call-info></app-sections-call-info>
+  </div>
+</div>
diff --git a/src/app/pages/call/components/call-history.page.component.scss b/src/app/pages/call/components/call-history.page.component.scss
new file mode 100644
index 0000000..3e1d1a2
--- /dev/null
+++ b/src/app/pages/call/components/call-history.page.component.scss
@@ -0,0 +1,33 @@
+@import '~@ucap/lg-scss/mixins';
+
+.contents-main {
+  position: relative;
+  .subtitle {
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16);
+    position: relative;
+    z-index: 4;
+  }
+  .message-box-container {
+    overflow: hidden;
+    height: 100%;
+    .message-area {
+      position: relative;
+      height: 100%;
+      overflow: hidden;
+    }
+    .message-input {
+      max-height: 70%;
+      overflow-x: hidden;
+      overflow-y: auto;
+      padding: 1px 0;
+      background-color: $white;
+    }
+  }
+  .rightDrawer {
+    min-width: 360px;
+    max-width: 100%;
+    @include screen(xs) {
+      min-width: 100%;
+    }
+  }
+}
diff --git a/src/app/pages/call/components/call-history.page.component.spec.ts b/src/app/pages/call/components/call-history.page.component.spec.ts
new file mode 100644
index 0000000..316a925
--- /dev/null
+++ b/src/app/pages/call/components/call-history.page.component.spec.ts
@@ -0,0 +1,32 @@
+import { TestBed, async } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { CallHistoryPageComponent } from './call-history.page.component';
+
+describe('app::pages::chat::CallHistoryPageComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [RouterTestingModule],
+      declarations: [CallHistoryPageComponent]
+    }).compileComponents();
+  }));
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(CallHistoryPageComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'ucap-lg-web'`, () => {
+    const fixture = TestBed.createComponent(CallHistoryPageComponent);
+    const app = fixture.componentInstance;
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(CallHistoryPageComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement;
+    expect(compiled.querySelector('.content span').textContent).toContain(
+      'ucap-lg-web app is running!'
+    );
+  });
+});
diff --git a/src/app/pages/call/components/call-history.page.component.ts b/src/app/pages/call/components/call-history.page.component.ts
new file mode 100644
index 0000000..43649d9
--- /dev/null
+++ b/src/app/pages/call/components/call-history.page.component.ts
@@ -0,0 +1,129 @@
+import {
+  Component,
+  OnInit,
+  OnDestroy,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef
+} from '@angular/core';
+import { ActivatedRoute, Params } from '@angular/router';
+
+import { Subject } from 'rxjs';
+import { takeUntil, withLatestFrom } from 'rxjs/operators';
+import { QueryParams } from '../types/params.type';
+import { Store, select } from '@ngrx/store';
+
+import { UserInfoSS } from '@ucap/domain-organization';
+
+import { UserSelector } from '@ucap/ng-store-organization';
+import { AppOrganizationService } from '@app/services/app-organization.service';
+
+import { ConfigurationSelector } from '@ucap/ng-store-authentication';
+
+import {
+  ProfileDialogComponent,
+  ProfileDialogData,
+  ProfileDialogResult
+} from '@app/sections/organization/dialogs/profile.dialog.component';
+import { MatDialog } from '@angular/material/dialog';
+import { VersionInfo } from '@ucap/domain-authentication';
+
+@Component({
+  selector: 'app-pages-call-history',
+  templateUrl: './call-history.page.component.html',
+  styleUrls: ['./call-history.page.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class CallHistoryPageComponent implements OnInit, OnDestroy {
+  isMe: boolean;
+  userSeq: string;
+  userInfo: UserInfoSS;
+
+  versionInfo: VersionInfo;
+
+  private ngOnDestroySubject: Subject<void> = new Subject();
+  constructor(
+    private dialog: MatDialog,
+    private store: Store<any>,
+    private appOrganizationService: AppOrganizationService,
+    private activatedRoute: ActivatedRoute,
+    private changeDetectorRef: ChangeDetectorRef
+  ) {}
+
+  ngOnInit(): void {
+    this.activatedRoute.queryParams
+      .pipe(
+        takeUntil(this.ngOnDestroySubject),
+        withLatestFrom(this.store.pipe(select(UserSelector.user)))
+      )
+      .subscribe(([params, user]) => {
+        const seqParam = params[QueryParams.ID];
+
+        // initializing by userSeq Change.
+        if (this.userSeq !== seqParam) {
+        }
+
+        // setting userSeq.
+        this.userSeq = !!seqParam
+          ? seqParam
+          : !!user
+          ? String(user.info.seq)
+          : undefined;
+
+        if (!!user && this.userSeq === String(user.info.seq)) {
+          this.isMe = true;
+        } else {
+          this.isMe = false;
+        }
+
+        if (!!this.userSeq) {
+          const self = this;
+          this.appOrganizationService
+            .getUserInfo({ userSeq: this.userSeq, user })
+            .then((result) => {
+              console.log('getUserInfo : ', result);
+              self.userInfo = result.userInfo;
+            })
+            .catch((e) => {
+              self.userInfo = undefined;
+            })
+            .finally(() => {
+              this.changeDetectorRef.markForCheck();
+            });
+        } else {
+          this.userInfo = undefined;
+          this.changeDetectorRef.markForCheck();
+        }
+      });
+
+    this.store
+      .pipe(
+        takeUntil(this.ngOnDestroySubject),
+        select(ConfigurationSelector.versionInfo)
+      )
+      .subscribe((versionInfo) => {
+        this.versionInfo = versionInfo;
+      });
+  }
+
+  ngOnDestroy(): void {
+    if (!!this.ngOnDestroySubject) {
+      this.ngOnDestroySubject.next();
+      this.ngOnDestroySubject.complete();
+    }
+  }
+
+  onOpenProfile(userInfo: UserInfoSS): void {
+    if (!!userInfo) {
+      this.dialog.open<
+        ProfileDialogComponent,
+        ProfileDialogData,
+        ProfileDialogResult
+      >(ProfileDialogComponent, {
+        panelClass: 'mid-create-dialog',
+        data: {
+          userSeq: userInfo.seq
+        }
+      });
+    }
+  }
+}
diff --git a/src/app/pages/call/components/index.page.component.html b/src/app/pages/call/components/index.page.component.html
index 7267978..0a9436d 100644
--- a/src/app/pages/call/components/index.page.component.html
+++ b/src/app/pages/call/components/index.page.component.html
@@ -1 +1,39 @@
-Index page of call is works!
+<div class="index-page-call-info">
+  <div class="ico-page-call">
+    <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 166 142">
+      <g transform="translate(-152.267 -127.865)">
+        <path
+          d="M0 0H166V142H0z"
+          data-name="square-01"
+          transform="translate(152.267 127.865)"
+          style="fill: none;"
+        />
+        <path
+          d="M45.694 2a43.788 43.788 0 0 1 33.84 71.495l8.744 8.756a4.269 4.269 0 0 1-3.235 7.311H45.694a43.781 43.781 0 0 1 0-87.562z"
+          data-name="comment-dots-01"
+          transform="translate(199.283 158.998)"
+          style="stroke: #bababa; stroke-width: 4px; fill: #fff;"
+        />
+        <path
+          d="M26.015 2A24.012 24.012 0 0 0 7.458 41.206l-4.8 4.8a2.341 2.341 0 0 0 1.774 4.009h21.583a24.009 24.009 0 0 0 0-48.015z"
+          data-name="comment-dots-02"
+          transform="translate(167.028 170.336)"
+          style="fill: #999;"
+        />
+        <path
+          d="M33.725 5.917a5.628 5.628 0 1 1 11.242 0 5.628 5.628 0 1 1-11.242 0zm-16.862 0A5.775 5.775 0 0 1 22.483 0 5.775 5.775 0 0 1 28.1 5.917a5.774 5.774 0 0 1-5.621 5.917 5.774 5.774 0 0 1-5.617-5.917zM0 5.917A5.775 5.775 0 0 1 5.621 0a5.775 5.775 0 0 1 5.621 5.917 5.774 5.774 0 0 1-5.621 5.917A5.774 5.774 0 0 1 0 5.917z"
+          transform="translate(223.585 197.682)"
+          style="fill: #bababa;"
+        />
+        <path
+          d="M13.476 22.894l-7.509-6.82L3.41 18.38l10.066 9.143L35.086 7.9l-2.539-2.31z"
+          transform="translate(174.515 180.942)"
+          style="fill: #fff;"
+        />
+      </g>
+    </svg>
+  </div>
+  <p class="call-index-copy">
+    {{ 'call:noSelectHistory' | ucapI18n }}
+  </p>
+</div>
diff --git a/src/app/pages/call/components/index.page.component.scss b/src/app/pages/call/components/index.page.component.scss
index e69de29..3a62ab9 100644
--- a/src/app/pages/call/components/index.page.component.scss
+++ b/src/app/pages/call/components/index.page.component.scss
@@ -0,0 +1,33 @@
+@import '~@ucap/lg-scss/mixins';
+.index-page-call-info {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  .ico-page-call {
+    width: 166px;
+    height: 142px;
+    margin-top: -80px;
+  }
+  .call-index-copy {
+    font-size: 1.429em;
+    color: #666;
+    padding: 10px 20px;
+    border-top: 1px solid #ccc;
+    border-bottom: 1px solid #ccc;
+    margin: 50px 0 0;
+  }
+  @include screen(xs) {
+    .ico-page-call {
+      width: 120px;
+      height: auto;
+      margin-top: -40px;
+    }
+    .call-index-copy {
+      font-size: 1.2em;
+      margin: 20px 0 0;
+    }
+  }
+}
diff --git a/src/app/pages/call/components/index.ts b/src/app/pages/call/components/index.ts
index c5347e7..1750e25 100644
--- a/src/app/pages/call/components/index.ts
+++ b/src/app/pages/call/components/index.ts
@@ -1,4 +1,9 @@
 import { IndexPageComponent } from './index.page.component';
 import { SidenavPageComponent } from './sidenav.page.component';
+import { CallHistoryPageComponent } from './call-history.page.component';
 
-export const COMPONENTS = [IndexPageComponent, SidenavPageComponent];
+export const COMPONENTS = [
+  IndexPageComponent,
+  SidenavPageComponent,
+  CallHistoryPageComponent
+];
diff --git a/src/app/pages/call/components/sidenav.page.component.html b/src/app/pages/call/components/sidenav.page.component.html
index b4de8eb..cea6943 100644
--- a/src/app/pages/call/components/sidenav.page.component.html
+++ b/src/app/pages/call/components/sidenav.page.component.html
@@ -1,3 +1,21 @@
-<div fxFlexFill>
-  sidenav page of call is works!
+<div class="sidenav-container call" fxFlexFill fxLayout="column">
+  <div class="title-section" fxFlex="0 0 50px" fxLayout="row">
+    <div class="title">
+      <h3 fxFlex="1 1 auto">{{ 'call:label.call' | ucapI18n }}</h3>
+    </div>
+  </div>
+  <div class="extra-box" fxFlex="0 0 50px">
+    <app-organization-search-for-tenant
+      [isBackspaceCanceled]="isBackspaceCanceled"
+      [(searchData)]="companySearchData"
+      (canceled)="onSearchCancel()"
+    >
+    </app-organization-search-for-tenant>
+  </div>
+
+  <div fxFlex="1 1 auto">
+    <app-sections-call-list
+      [searchObj]="companySearchData"
+    ></app-sections-call-list>
+  </div>
 </div>
diff --git a/src/app/pages/call/components/sidenav.page.component.scss b/src/app/pages/call/components/sidenav.page.component.scss
index e69de29..99b15ca 100644
--- a/src/app/pages/call/components/sidenav.page.component.scss
+++ b/src/app/pages/call/components/sidenav.page.component.scss
@@ -0,0 +1,29 @@
+@import '~@ucap/lg-scss/mixins';
+
+.sidenav-container.call {
+  overflow: hidden;
+  display: flex;
+  flex-flow: column;
+  align-content: flex-start;
+  background-color: #f1f2f6;
+
+  .title-section {
+    display: flex;
+    flex-flow: column;
+    background-color: $white;
+    .title {
+      display: flex;
+      flex-flow: row nowrap;
+      justify-content: space-between;
+      padding: 0 0 0 17px;
+      background-color: $white;
+      align-items: center;
+      width: 100%;
+      h3 {
+        @include font-family-txt(18, left, $lipstick);
+        align-items: center;
+        font-weight: 600;
+      }
+    }
+  }
+}
diff --git a/src/app/pages/call/components/sidenav.page.component.ts b/src/app/pages/call/components/sidenav.page.component.ts
index b974a68..3196aa4 100644
--- a/src/app/pages/call/components/sidenav.page.component.ts
+++ b/src/app/pages/call/components/sidenav.page.component.ts
@@ -1,13 +1,109 @@
-import { Component, Inject } from '@angular/core';
-import { Router } from '@angular/router';
+import { Subject, combineLatest } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+import {
+  Component,
+  OnInit,
+  OnDestroy,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef
+} from '@angular/core';
+
+import { Store, select } from '@ngrx/store';
+
+import { User } from '@ucap/domain-organization';
+import { LoginSession, LoginInfo } from '@ucap/domain-authentication';
+import { SearchType, SearchDirectionByDateType } from '@ucap/domain-call';
+import { CallHistoryInfoRequest } from '@ucap/api-contact';
 
 import { LogService } from '@ucap/ng-logger';
+import { CallActions } from '@ucap/ng-store-call';
+
+import { UserSelector } from '@ucap/ng-store-organization';
+import { LoginSelector } from '@ucap/ng-store-authentication';
+
+import { SearchData } from '@app/ucap/organization/models/search-data';
+import { AppAuthenticationService } from '@app/services/app-authentication.service';
+
+import moment from 'moment';
+import { environment } from '@environments';
 
 @Component({
   selector: 'app-pages-call-sidenav',
   templateUrl: './sidenav.page.component.html',
-  styleUrls: ['./sidenav.page.component.scss']
+  styleUrls: ['./sidenav.page.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class SidenavPageComponent {
-  constructor(private logService: LogService) {}
+export class SidenavPageComponent implements OnInit, OnDestroy {
+  set companySearchData(searchData: SearchData) {
+    if (!!searchData && searchData.searchWord !== '') {
+      this._companySearchData = { ...searchData, bySearch: true };
+    } else {
+      this._companySearchData = { ...searchData, bySearch: false };
+    }
+  }
+  get companySearchData() {
+    return this._companySearchData;
+  }
+  // tslint:disable-next-line: variable-name
+  _companySearchData: SearchData;
+  isBackspaceCanceled = true;
+
+  user: User;
+  loginInfo: LoginInfo;
+  loginSession: LoginSession;
+
+  private ngOnDestroySubject: Subject<void> = new Subject();
+  constructor(
+    private store: Store<any>,
+    private appAuthenticationService: AppAuthenticationService,
+    private changeDetectorRef: ChangeDetectorRef,
+    private logService: LogService
+  ) {}
+
+  ngOnInit(): void {
+    combineLatest([
+      this.store.pipe(select(UserSelector.user)),
+      this.store.pipe(select(LoginSelector.loginInfo))
+    ])
+      .pipe(takeUntil(this.ngOnDestroySubject))
+      .subscribe(([user, loginInfo]) => {
+        if (!!user && !!loginInfo) {
+          this.user = user;
+          this.loginInfo = loginInfo;
+          this.loginSession = this.appAuthenticationService.getLoginSession();
+
+          this._retrieveCallHistory();
+        }
+      });
+  }
+
+  ngOnDestroy(): void {
+    if (!!this.ngOnDestroySubject) {
+      this.ngOnDestroySubject.next();
+      this.ngOnDestroySubject.complete();
+    }
+  }
+
+  onSearchCancel() {
+    this.companySearchData = { ...this.companySearchData, searchWord: '' };
+  }
+
+  private _retrieveCallHistory() {
+    const searchStartDate = moment(new Date()).format('YYYY-MM-DD_HH:mm:ss');
+    const req: CallHistoryInfoRequest = {
+      userSeq: String(this.user.info.seq),
+      deviceType: this.loginSession.deviceType,
+      token: this.loginInfo.tokenString,
+      searchType: SearchType.All,
+      searchUserSeq: '',
+      searchNumber: '',
+      searchDate: '',
+      searchStartDate,
+      searchListCount:
+        environment.productConfig.call.historyRequestDefaultCount,
+      searchDirection: SearchDirectionByDateType.Before
+    };
+    this.store.dispatch(CallActions.callHistory({ req }));
+  }
 }
diff --git a/src/app/pages/call/types/params.type.ts b/src/app/pages/call/types/params.type.ts
new file mode 100644
index 0000000..99b5bb6
--- /dev/null
+++ b/src/app/pages/call/types/params.type.ts
@@ -0,0 +1,3 @@
+export enum QueryParams {
+  ID = 'id'
+}
diff --git a/src/app/pages/chat/chat.page.module.ts b/src/app/pages/chat/chat.page.module.ts
index 60cff30..5be2006 100644
--- a/src/app/pages/chat/chat.page.module.ts
+++ b/src/app/pages/chat/chat.page.module.ts
@@ -14,7 +14,10 @@ import { AppChatSectionModule } from '@app/sections/chat/chat.section.module';
 
 import { AppChatRoutingPageModule } from './chat-routing.page.module';
 
-import { UiModule } from '@ucap/ng-ui';
+import { UiCoreModule } from '@ucap/ng-ui/core';
+import { UiDateModule } from '@ucap/ng-ui/date';
+import { UiViewerModule } from '@ucap/ng-ui/viewer';
+
 import { COMPONENTS } from './components';
 import { UCAP_I18N_NAMESPACE, I18nModule } from '@ucap/ng-i18n';
 
@@ -30,11 +33,14 @@ import { UCAP_I18N_NAMESPACE, I18nModule } from '@ucap/ng-i18n';
     MatSidenavModule,
     MatTooltipModule,
 
+    UiCoreModule,
+    UiDateModule,
+    UiViewerModule,
+
     AppChatSectionModule,
     AppChatRoutingPageModule,
 
-    I18nModule,
-    UiModule
+    I18nModule
   ],
   declarations: [...COMPONENTS],
   entryComponents: [],
diff --git a/src/app/pages/chat/components/chat-room.page.component.html b/src/app/pages/chat/components/chat-room.page.component.html
index e2f0dd5..1b5d3c7 100644
--- a/src/app/pages/chat/components/chat-room.page.component.html
+++ b/src/app/pages/chat/components/chat-room.page.component.html
@@ -8,12 +8,23 @@
   </div>
   <app-sections-chat-chat-search
     [isChatSearch]="isChatSearch"
+    (chatSearch)="onChatSearch($event)"
     (closeChatSearch)="isChatSearch = false"
   ></app-sections-chat-chat-search>
   <mat-drawer-container autosize fxFlex="1 1 auto" fxLayout="column">
-    <div class="message-box-container" fxFlex="1 1 auto" fxLayout="column">
+    <div
+      class="message-box-container"
+      fxFlex="1 1 auto"
+      fxLayout="column"
+      ucapFileUploadFor01
+      (fileSelected)="onFileSelected($event)"
+      (fileDragEnter)="onFileDragEnter($event)"
+      (fileDragOver)="onFileDragOver($event)"
+      (fileDragLeave)="onFileDragLeave($event)"
+    >
       <div class="message-area" fxFlex="1 1 auto">
         <app-sections-chat-message
+          #chatMessageSections
           [roomId]="roomId"
           [translationSimpleview]="translationSimpleview"
           [eventSendTrigger$]="eventSendTriggerSubject.asObservable()"
@@ -21,9 +32,11 @@
       </div>
       <div class="message-input" fxFlex="0 0 auto">
         <app-sections-chat-form
+          #chatForm
           [roomId]="roomId"
           (changeTranslationSimpleview)="translationSimpleview = $event"
           (eventSendTrigger)="eventSendTriggerSubject.next($event)"
+          (openFormSelector)="onOpenFormSelector()"
         ></app-sections-chat-form>
       </div>
     </div>
diff --git a/src/app/pages/chat/components/chat-room.page.component.ts b/src/app/pages/chat/components/chat-room.page.component.ts
index 8cf2b5b..a132cdf 100644
--- a/src/app/pages/chat/components/chat-room.page.component.ts
+++ b/src/app/pages/chat/components/chat-room.page.component.ts
@@ -1,15 +1,25 @@
+import { Subject, BehaviorSubject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
 import { Component, ViewChild, OnInit, OnDestroy } from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
 
+import { Store } from '@ngrx/store';
+
 import { MatDrawer } from '@angular/material/sidenav';
 
-import { Subscription, Subject, BehaviorSubject } from 'rxjs';
+import { ChattingActions } from '@ucap/ng-store-chat';
+
+import { MessageSectionComponent } from '@app/sections/chat/components/message.section.component';
+import {
+  FormSectionComponent,
+  SelectorType
+} from '@app/sections/chat/components/form.section.component';
+
 import { QueryParams } from '../types/params.type';
 import { ChatDrawType } from '../types/chat-draw.type';
-import { takeUntil } from 'rxjs/operators';
 import { DrawInfo } from '../models/draw-info';
-import { Store } from '@ngrx/store';
-import { RoomActions, ChattingActions } from '@ucap/ng-store-chat';
+import { SearchInfo } from '../models/search-info';
 
 @Component({
   selector: 'app-pages-chat-room',
@@ -18,6 +28,11 @@ import { RoomActions, ChattingActions } from '@ucap/ng-store-chat';
 })
 export class ChatRoomPageComponent implements OnInit, OnDestroy {
   isChatSearch = false;
+  searchObj: SearchInfo = {
+    isShowSearch: false,
+    searchWord: ''
+  };
+
   roomId: string;
   translationSimpleview = false;
 
@@ -25,9 +40,15 @@ export class ChatRoomPageComponent implements OnInit, OnDestroy {
   returnDrawerType: ChatDrawType | null;
   eventSendTriggerSubject: BehaviorSubject<any> = new BehaviorSubject<any>(0);
 
+  @ViewChild('chatMessageSections', { static: false })
+  chatMessageSections: MessageSectionComponent;
+
   @ViewChild('chatRightDrawer', { static: false })
   chatRightDrawer: MatDrawer;
 
+  @ViewChild('chatForm', { static: false })
+  chatForm: FormSectionComponent;
+
   ChatDrawType = ChatDrawType;
 
   private ngOnDestroySubject: Subject<void> = new Subject();
@@ -42,11 +63,20 @@ export class ChatRoomPageComponent implements OnInit, OnDestroy {
       .pipe(takeUntil(this.ngOnDestroySubject))
       .subscribe((params: Params) => {
         const seqParam = params[QueryParams.ROOM_ID];
+
         // initializing by roomId Change.
         if (this.roomId !== seqParam) {
+          // close Right Drawer.
           if (!!this.chatRightDrawer) {
             this.chatRightDrawer.close();
           }
+
+          // close Chat Search area.
+          this.isChatSearch = false;
+          this.searchObj = {
+            isShowSearch: false,
+            searchWord: ''
+          };
         }
 
         // setting roomId.
@@ -68,6 +98,14 @@ export class ChatRoomPageComponent implements OnInit, OnDestroy {
     this.store.dispatch(ChattingActions.clearActiveRoomId({}));
   }
 
+  /** About Form Selector */
+  onOpenFormSelector() {
+    if (!!this.chatMessageSections) {
+      this.chatMessageSections.refreshAndScrollToBottom();
+    }
+  }
+
+  /** About  Right drawer */
   onRightDrawerToggle(type: DrawInfo | null): void {
     this.drawerType = type.chatDrawType;
     this.returnDrawerType = !!type.returnDrawType ? type.returnDrawType : null;
@@ -78,4 +116,28 @@ export class ChatRoomPageComponent implements OnInit, OnDestroy {
     this.returnDrawerType = null;
     this.chatRightDrawer.close();
   }
+
+  /** About File Drag & Drop */
+  onFileSelected(fileList: FileList) {
+    if (!!this.chatForm) {
+      this.chatForm.onDragAndDropFileupload(fileList); // direct upload
+      // this.chatForm.onDragAndDropStandbyFileupload(fileList); // standby and confirm upload.(complate not yet)
+    }
+  }
+  onFileDragEnter(event: DataTransferItemList) {
+    // if (!!this.chatForm) {
+    //   this.chatForm.onOpenSelector(SelectorType.FILEUPLOAD);
+    // }
+  }
+  onFileDragOver(event: DragEvent) {}
+  onFileDragLeave(event: DragEvent) {
+    // if (!!this.chatForm) {
+    //   this.chatForm.clearSelector();
+    // }
+  }
+
+  /** About Chat search. */
+  onChatSearch(search: SearchInfo) {
+    this.searchObj = search;
+  }
 }
diff --git a/src/app/pages/chat/components/index.page.component.scss b/src/app/pages/chat/components/index.page.component.scss
index 49addc5..e0238ea 100644
--- a/src/app/pages/chat/components/index.page.component.scss
+++ b/src/app/pages/chat/components/index.page.component.scss
@@ -1,3 +1,4 @@
+@import '~@ucap/lg-scss/mixins';
 .index-page-chat-info {
   width: 100%;
   height: 100%;
@@ -18,4 +19,15 @@
     border-bottom: 1px solid #ccc;
     margin: 50px 0 0;
   }
+  @include screen(xs) {
+    .ico-page-chat {
+      width: 120px;
+      height: auto;
+      margin-top: -40px;
+    }
+    .chat-index-copy {
+      font-size: 1.2em;
+      margin: 20px 0 0;
+    }
+  }
 }
diff --git a/src/app/pages/chat/components/sidenav.page.component.scss b/src/app/pages/chat/components/sidenav.page.component.scss
index ff8da69..3826a68 100644
--- a/src/app/pages/chat/components/sidenav.page.component.scss
+++ b/src/app/pages/chat/components/sidenav.page.component.scss
@@ -10,10 +10,12 @@
     display: flex;
     flex-flow: row nowrap;
     justify-content: space-between;
-    padding: 0 5px 0 17px;
-    background-color: $white;
     align-items: center;
     width: 100%;
+    height: 50px;
+    min-height: 50px;
+    padding: 0 5px 0 17px;
+    background-color: $white;
     h3 {
       @include font-family-txt(18, left, $lipstick);
       align-items: center;
diff --git a/src/app/pages/chat/components/sidenav.page.component.ts b/src/app/pages/chat/components/sidenav.page.component.ts
index 22ec4ca..6c721bd 100644
--- a/src/app/pages/chat/components/sidenav.page.component.ts
+++ b/src/app/pages/chat/components/sidenav.page.component.ts
@@ -1,24 +1,32 @@
+import { Subject, of } from 'rxjs';
+import { takeUntil, take, map, catchError } from 'rxjs/operators';
+
 import { Component, ChangeDetectorRef, OnInit, OnDestroy } from '@angular/core';
+import { ActivatedRoute, Params } from '@angular/router';
+
+import { Store, select } from '@ngrx/store';
+
+import { MatDialog } from '@angular/material/dialog';
+
+import { RoomInfo } from '@ucap/domain-chat';
+
+import { ExitAllRequest } from '@ucap/protocol-room';
 
 import { LogService } from '@ucap/ng-logger';
-import { Subject, of } from 'rxjs';
-import { Store, select } from '@ngrx/store';
-import { takeUntil, take, map, catchError } from 'rxjs/operators';
+import { I18nService } from '@ucap/ng-i18n';
 import { RoomSelector, RoomActions } from '@ucap/ng-store-chat';
-import { RoomInfo, ExitAllRequest } from '@ucap/protocol-room';
-import { MatDialog } from '@angular/material/dialog';
+
 import {
   ConfirmDialogComponent,
   ConfirmDialogData,
   ConfirmDialogResult
-} from '@ucap/ng-ui';
-import { I18nService } from '@ucap/ng-i18n';
-import { SearchInfo } from '../models/search-info';
-import { ActivatedRoute, Params } from '@angular/router';
-import { QueryParams } from '../types/params.type';
+} from '@ucap/ng-ui/core';
+
 import { AppChatService } from '@app/services/app-chat.service';
-import { SessionStorageService } from '@ucap/ng-web-storage';
-import { AppKey } from '@app/types';
+import { AppRoomSelector } from '@app/store/state';
+
+import { SearchInfo } from '../models/search-info';
+import { QueryParams } from '../types/params.type';
 
 @Component({
   selector: 'app-pages-chat-sidenav',
@@ -46,14 +54,18 @@ export class SidenavPageComponent implements OnInit, OnDestroy {
     private dialog: MatDialog,
     private i18nService: I18nService,
     private logService: LogService,
-    private sessionStorageService: SessionStorageService,
     private activatedRoute: ActivatedRoute,
     private appChatService: AppChatService,
     private changeDetectorRef: ChangeDetectorRef
   ) {
-    this.historyRoomId = this.sessionStorageService.get<string>(
-      AppKey.HistoryRoomId
-    );
+    this.store
+      .pipe(
+        takeUntil(this.ngOnDestroySubject),
+        select(AppRoomSelector.historyRoomId)
+      )
+      .subscribe((historyRoomId) => {
+        this.historyRoomId = historyRoomId;
+      });
   }
 
   ngOnInit(): void {
@@ -62,10 +74,9 @@ export class SidenavPageComponent implements OnInit, OnDestroy {
       .subscribe((params: Params) => {
         const seqParam = params[QueryParams.ROOM_ID];
 
-        this.sessionStorageService.set<string>(
-          AppKey.HistoryRoomId,
-          !!seqParam ? seqParam : undefined
-        );
+        if (!!seqParam) {
+          this.appChatService.setHistoryRoomId(seqParam);
+        }
 
         if (
           seqParam === undefined &&
diff --git a/src/app/pages/group/components/index.page.component.html b/src/app/pages/group/components/index.page.component.html
index 7a301c0..25a6db6 100644
--- a/src/app/pages/group/components/index.page.component.html
+++ b/src/app/pages/group/components/index.page.component.html
@@ -22,7 +22,8 @@
     >
       <app-organization-profile-01
         [userSeq]="userSeq"
-        (openChat)="onOpenCaht($event)"
+        [companyList]="companyList"
+        (openChat)="onOpenChat($event)"
         (sendMessage)="onSendMessage($event)"
         (sendCall)="onSendCall($event)"
         (sendSms)="onSendSms($event)"
diff --git a/src/app/pages/group/components/index.page.component.scss b/src/app/pages/group/components/index.page.component.scss
index 120bb37..cee4763 100644
--- a/src/app/pages/group/components/index.page.component.scss
+++ b/src/app/pages/group/components/index.page.component.scss
@@ -48,9 +48,10 @@
       position: fixed;
       height: 49px;
       top: 40px;
-      left: 75px;
+      left: 60px;
       z-index: 10;
-      width: calc(100% - 90px);
+      width: calc(100% - 60px);
+      background-color: rgba(255, 255, 255, 0.3);
       a {
         width: 50%;
         text-decoration: none;
@@ -66,11 +67,11 @@
   .profile-container {
     height: 100%;
     overflow: auto;
-    flex: 1 0 460px !important;
+    flex: 0 0 460px !important;
     max-width: inherit !important;
     border-radius: 2px;
     @include screen(custom, min, 1540) {
-      flex: 1 0 44% !important;
+      flex: 0 0 44% !important;
     }
     @include screen(lg) {
       flex: 1 0 auto !important;
diff --git a/src/app/pages/group/components/index.page.component.ts b/src/app/pages/group/components/index.page.component.ts
index 380e34c..53282dd 100644
--- a/src/app/pages/group/components/index.page.component.ts
+++ b/src/app/pages/group/components/index.page.component.ts
@@ -1,5 +1,5 @@
 import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { takeUntil, take, map } from 'rxjs/operators';
 
 import {
   Component,
@@ -14,22 +14,29 @@ import { MatDialog } from '@angular/material/dialog';
 
 import { Store, select } from '@ngrx/store';
 
-import { FileUploadItem } from '@ucap/api';
+import { FileUploadItem } from '@ucap/domain-common';
+import {
+  UserInfoSS,
+  UserInfoF,
+  UserInfoUpdateType,
+  User,
+  Company
+} from '@ucap/domain-organization';
+
 import { FileProfileSaveRequest } from '@ucap/api-common';
-import { VersionInfo2Response } from '@ucap/api-public';
-import { UserInfoSS, UserInfoF } from '@ucap/protocol-query';
-import { UserInfoUpdateType, User } from '@ucap/protocol-info';
-import { LoginResponse } from '@ucap/protocol-authentication';
+
+import { ConferenceCreateRequest } from '@ucap/api-prompt';
 
 import { LogService } from '@ucap/ng-logger';
 import { I18nService } from '@ucap/ng-i18n';
-import { UserSelector } from '@ucap/ng-store-organization';
+import { UserSelector, CompanySelector } from '@ucap/ng-store-organization';
+import { BuddySelector } from '@ucap/ng-store-group';
 import {
   LoginSelector,
   ConfigurationSelector
 } from '@ucap/ng-store-authentication';
 
-import { UserInfoTypes } from '@app/types';
+import { UserInfoTypes, GroupManageType } from '@app/types';
 import { AppFileService } from '@app/services/app-file.service';
 import { AppAuthenticationService } from '@app/services/app-authentication.service';
 import { AppGroupService } from '@app/services/app-group.service';
@@ -37,6 +44,13 @@ import { AppGroupService } from '@app/services/app-group.service';
 import { QueryParams } from '../types/params.type';
 import { AppChatService } from '@app/services/app-chat.service';
 
+import {
+  EditUserDialogComponent,
+  EditUserDialogData,
+  EditUserDialogResult
+} from '@app/sections/group/dialogs/edit-user.dialog.component';
+import { LoginInfo, VersionInfo } from '@ucap/domain-authentication';
+
 @Component({
   selector: 'app-pages-group-index',
   templateUrl: './index.page.component.html',
@@ -65,11 +79,13 @@ export class IndexPageComponent implements OnInit, OnDestroy {
 
   userSeq: string = undefined;
   user: User;
-  loginRes: LoginResponse;
-  versionInfo2Res: VersionInfo2Response;
+  loginInfo: LoginInfo;
+  versionInfo: VersionInfo;
   activeLink = 0;
   tabName: string;
   profileName: string;
+  buddyList: UserInfoTypes[];
+  companyList: Company[];
 
   ngOnInit(): void {
     this.activatedRoute.queryParams
@@ -91,18 +107,36 @@ export class IndexPageComponent implements OnInit, OnDestroy {
         this._refreshProfile();
       });
     this.store
-      .pipe(takeUntil(this.ngOnDestroySubject), select(LoginSelector.loginRes))
-      .subscribe((loginRes) => {
-        this.loginRes = loginRes;
+      .pipe(takeUntil(this.ngOnDestroySubject), select(LoginSelector.loginInfo))
+      .subscribe((loginInfo) => {
+        this.loginInfo = loginInfo;
       });
 
     this.store
       .pipe(
         takeUntil(this.ngOnDestroySubject),
-        select(ConfigurationSelector.versionInfo2Response)
+        select(ConfigurationSelector.versionInfo)
       )
-      .subscribe((versionInfo2Res) => {
-        this.versionInfo2Res = versionInfo2Res;
+      .subscribe((versionInfo) => {
+        this.versionInfo = versionInfo;
+      });
+
+    this.store
+      .pipe(takeUntil(this.ngOnDestroySubject), select(BuddySelector.buddies))
+      .subscribe((buddies) => {
+        this.buddyList = buddies;
+      });
+
+    this.store
+      .pipe(
+        takeUntil(this.ngOnDestroySubject),
+        select(CompanySelector.companyList)
+      )
+      .subscribe((companyList) => {
+        if (!companyList) {
+          return;
+        }
+        this.companyList = companyList;
       });
   }
 
@@ -113,7 +147,7 @@ export class IndexPageComponent implements OnInit, OnDestroy {
     }
   }
 
-  onOpenCaht(userInfo: UserInfoSS) {
+  onOpenChat(userInfo: UserInfoSS) {
     this.appChatService.newOpenRoom(
       [Number(userInfo.seq) as any],
       false,
@@ -123,29 +157,61 @@ export class IndexPageComponent implements OnInit, OnDestroy {
   onSendMessage(userInfo: UserInfoSS) {}
   onSendCall(call: string) {}
   onSendSms(employeeNum: string) {}
-  onCreateConference(userSeq: number) {}
+  onCreateConference(userSeq: number) {
+    const loginSession = this.appAuthenticationService.getLoginSession();
+    const req: ConferenceCreateRequest = {
+      userSeq: String(this.user.info.seq),
+      deviceType: loginSession.deviceType,
+      tokenKey: this.loginInfo.tokenString,
+      targetUserSeqs: [userSeq]
+    };
+    this.appChatService.openVideoConference(req);
+  }
   onToggleFavorit(params: { userInfo: UserInfoSS; isFavorite: boolean }) {
     this.appGroupService.updateBuddy(params.userInfo, params.isFavorite);
   }
   onToggleBuddy(params: { userInfo: UserInfoSS; isBuddy: boolean }) {
-    this.appGroupService
-      .updateBuddyByToggle(params)
-      .then((isRemoveBuddy) => {
-        if (isRemoveBuddy) {
-          this.router.navigate(
-            [
-              'group',
-              {
-                outlets: { content: 'index' }
-              }
-            ],
-            {
-              queryParams: { id: Number(params.userInfo.seq) }
-            }
-          );
+    if (params.isBuddy) {
+      // 동료추가
+      const dialogRef = this.dialog.open<
+        EditUserDialogComponent,
+        EditUserDialogData,
+        EditUserDialogResult
+      >(EditUserDialogComponent, {
+        panelClass: 'max-create-dialog',
+        data: {
+          title: this.i18nService.t('group:dialog.title.addBuddy'),
+          type: GroupManageType.Add,
+          userInfos: [params.userInfo]
         }
-      })
-      .catch((reson) => this.logService.error(reson));
+      });
+      dialogRef
+        .afterClosed()
+        .pipe(
+          take(1),
+          map((result: EditUserDialogResult) => {
+            if (!!result) {
+              this.appGroupService.addBuddy(result);
+            }
+          })
+        )
+        .subscribe();
+    } else {
+      // 동료삭제
+      this.appGroupService.removeBuddy(params.userInfo).then(() => {
+        this.router.navigate(
+          [
+            'group',
+            {
+              outlets: { content: 'index' }
+            }
+          ],
+          {
+            queryParams: { id: Number(params.userInfo.seq) }
+          }
+        );
+      });
+    }
   }
   onUploadProfileImage(profileImageFileUploadItem: FileUploadItem) {
     const loginSession = this.appAuthenticationService.getLoginSession();
@@ -153,14 +219,14 @@ export class IndexPageComponent implements OnInit, OnDestroy {
     const profile = {
       userSeq: String(this.user.info.seq),
       deviceType: loginSession.deviceType,
-      token: this.loginRes.tokenString,
+      token: this.loginInfo.tokenString,
       file: profileImageFileUploadItem.file,
       fileUploadItem: profileImageFileUploadItem
     } as FileProfileSaveRequest;
 
     this.appFileServie.fileProfileSave(
       profile,
-      this.versionInfo2Res.profileUploadUrl
+      this.versionInfo.profileUploadUrl
     );
   }
   onUpdateIntro(intro: string) {
@@ -168,6 +234,15 @@ export class IndexPageComponent implements OnInit, OnDestroy {
   }
 
   onUpdateNickname(params: { userInfo: UserInfoTypes; nickname: string }) {
+    const isBuddy = this.appGroupService.checkBuddy(
+      this.buddyList,
+      params.userInfo
+    );
+
+    if (!isBuddy) {
+      return;
+    }
+
     this.appGroupService.updateNickname(
       params.userInfo as UserInfoF,
       params.nickname
diff --git a/src/app/pages/group/components/sidenav.page.component.html b/src/app/pages/group/components/sidenav.page.component.html
index 6ca43e0..3dbd3c9 100644
--- a/src/app/pages/group/components/sidenav.page.component.html
+++ b/src/app/pages/group/components/sidenav.page.component.html
@@ -22,6 +22,7 @@
   </div>
   <div class="extra-box" fxFlex="0 0 50px">
     <app-organization-search-for-tenant
+      [isBackspaceCanceled]="isBackspaceCanceled"
       [(searchData)]="companySearchData"
       (canceled)="onSearchCancel()"
     >
@@ -34,6 +35,7 @@
       [searchData]="companySearchData"
       [showType]="showType"
       (clickUser)="onClickUser($event)"
+      (openProfile)="onOpenProfile($event)"
     ></app-sections-group-list>
   </div>
 </div>
diff --git a/src/app/pages/group/components/sidenav.page.component.ts b/src/app/pages/group/components/sidenav.page.component.ts
index a08f9a5..b17afa7 100644
--- a/src/app/pages/group/components/sidenav.page.component.ts
+++ b/src/app/pages/group/components/sidenav.page.component.ts
@@ -1,5 +1,5 @@
 import { of, Subject } from 'rxjs';
-import { take, map, catchError } from 'rxjs/operators';
+import { take, map, catchError, takeUntil } from 'rxjs/operators';
 
 import {
   Component,
@@ -7,7 +7,8 @@ import {
   OnDestroy,
   ChangeDetectorRef,
   ViewChild,
-  ChangeDetectionStrategy
+  ChangeDetectionStrategy,
+  NgZone
 } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 
@@ -15,14 +16,19 @@ import { Store } from '@ngrx/store';
 
 import { MatDialog } from '@angular/material/dialog';
 
+import { UserInfo } from '@ucap/domain-organization';
+
 import { LogService } from '@ucap/ng-logger';
 import { I18nService } from '@ucap/ng-i18n';
 
 import { SearchData } from '@app/ucap/organization/models/search-data';
 
+import { LoginSession } from '@app/models/login-session';
+import { AppUiService } from '@app/services/app-ui.service';
+import { AppAuthenticationService } from '@app/services/app-authentication.service';
 import { CreateDialogComponent } from '@app/sections/group/dialogs/create.dialog.component';
 import { ListSectionComponent } from '@app/sections/group/components/list.section.component';
-import { UserInfo } from '@ucap/protocol-sync';
+
 import { SortViewType } from '../types/sort-view.type';
 
 @Component({
@@ -47,25 +53,43 @@ export class SidenavPageComponent implements OnInit, OnDestroy {
   }
   // tslint:disable-next-line: variable-name
   _companySearchData: SearchData;
-
+  isBackspaceCanceled = true;
   showType: SortViewType;
   sortViewType = SortViewType;
 
   private ngOnDestroySubject: Subject<void> = new Subject();
-
+  private loginSession: LoginSession;
   constructor(
     private activatedRoute: ActivatedRoute,
     private router: Router,
+    private appAuthenticationService: AppAuthenticationService,
     private logService: LogService,
     private i18nService: I18nService,
     private store: Store<any>,
     private changeDetectorRef: ChangeDetectorRef,
-    public dialog: MatDialog
+    public dialog: MatDialog,
+    private appUiService: AppUiService,
+    private ngZone: NgZone
   ) {}
 
   ngOnInit(): void {
     this.showType = SortViewType.all;
     this.showGroupMenuIcon(SortViewType.all);
+
+    this.appAuthenticationService
+      .getLoginSession$()
+      .pipe(takeUntil(this.ngOnDestroySubject))
+      .subscribe((loginSession) => {
+        this.loginSession = loginSession;
+        if (
+          !!this.loginSession &&
+          !!this.loginSession.groupInfo &&
+          !!this.loginSession.groupInfo.showType
+        ) {
+          this.showType = this.loginSession.groupInfo.showType;
+          this.showGroupMenuIcon(this.loginSession.groupInfo.showType);
+        }
+      });
   }
 
   ngOnDestroy(): void {
@@ -132,6 +156,21 @@ export class SidenavPageComponent implements OnInit, OnDestroy {
         }
         break;
     }
+
+    if (
+      !!this.loginSession &&
+      !!this.loginSession.groupInfo &&
+      !!this.loginSession.groupInfo.showType
+    ) {
+      this.appAuthenticationService.setLoginSession({
+        ...this.loginSession,
+        groupInfo: {
+          groupSeqs: [],
+          lastGroupSeq: 0,
+          showType: this.showType
+        }
+      });
+    }
   }
   onSearchCancel() {
     this.companySearchData = { ...this.companySearchData, searchWord: '' };
@@ -146,16 +185,24 @@ export class SidenavPageComponent implements OnInit, OnDestroy {
   }
 
   onClickUser(userInfo: UserInfo) {
-    this.router.navigate(
-      [
-        'group',
+    this.ngZone.run(() => {
+      this.router.navigate(
+        [
+          'group',
+          {
+            outlets: { content: 'index' }
+          }
+        ],
         {
-          outlets: { content: 'index' }
+          queryParams: { id: Number(userInfo.seq) }
         }
-      ],
-      {
-        queryParams: { id: Number(userInfo.seq) }
-      }
-    );
+      );
+
+      this.appUiService.closeLeftSidenavOnNarrowMode();
+    });
+  }
+
+  onOpenProfile(userInfo: UserInfo) {
+    this.onClickUser(userInfo);
   }
 }
diff --git a/src/app/pages/group/group.page.module.ts b/src/app/pages/group/group.page.module.ts
index 12cf04c..3c78c6d 100644
--- a/src/app/pages/group/group.page.module.ts
+++ b/src/app/pages/group/group.page.module.ts
@@ -8,7 +8,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatTabsModule } from '@angular/material/tabs';
 
-import { UiModule } from '@ucap/ng-ui';
+// import { UiModule } from '@ucap/ng-ui';
 
 import { AppOrganizationModule } from '@app/ucap/organization/organization.module';
 
@@ -34,7 +34,6 @@ import { I18nModule, UCAP_I18N_NAMESPACE } from '@ucap/ng-i18n';
     AppGroupSectionModule,
     AppGroupRoutingPageModule,
 
-    UiModule,
     I18nModule
   ],
   declarations: [...COMPONENTS],
diff --git a/src/app/pages/message/components/index.page.component.scss b/src/app/pages/message/components/index.page.component.scss
index 81699d2..345ff8e 100644
--- a/src/app/pages/message/components/index.page.component.scss
+++ b/src/app/pages/message/components/index.page.component.scss
@@ -9,7 +9,7 @@
     width: 200px;
     height: 200px;
     margin-top: -100px;
-    background-image: url(../../../../assets/images/ico/img_coming_soon.png);
+    background-image: url(/assets/images/ico/img_coming_soon.png);
     background-size: 100% auto;
   }
   .coming-soon-index-copy {
diff --git a/src/app/pages/organization/components/index.page.component.html b/src/app/pages/organization/components/index.page.component.html
index ef04481..c707a9a 100644
--- a/src/app/pages/organization/components/index.page.component.html
+++ b/src/app/pages/organization/components/index.page.component.html
@@ -2,6 +2,7 @@
   <!-- search start-->
   <div fxFlex="0 0 50px">
     <app-organization-search-for-tenant
+      [isBackspaceCanceled]="isBackspaceCanceled"
       [(searchData)]="companySearchData"
       (canceled)="onCanceledSearch()"
     >
diff --git a/src/app/pages/organization/components/index.page.component.ts b/src/app/pages/organization/components/index.page.component.ts
index 879f70f..20ce2fb 100644
--- a/src/app/pages/organization/components/index.page.component.ts
+++ b/src/app/pages/organization/components/index.page.component.ts
@@ -12,11 +12,11 @@ import { ActivatedRoute, Router, Params } from '@angular/router';
 
 import { ParamsUtil } from '@ucap/ng-core';
 
+import { UserStore } from '@app/models/user-store';
 import { AppAuthenticationService } from '@app/services/app-authentication.service';
 import { SearchData } from '@app/ucap/organization/models/search-data';
 
 import { QueryParams } from '../types/params.type';
-import { UserStore } from '@app/models/user-store';
 
 @Component({
   selector: 'app-pages-organization-index',
@@ -36,7 +36,7 @@ export class IndexPageComponent implements OnInit, OnDestroy {
   _companySearchData: SearchData;
 
   deptSearchData: SearchData;
-
+  isBackspaceCanceled = true;
   deptSeq: string;
 
   private ngOnDestroySubject: Subject<void> = new Subject();
@@ -107,6 +107,7 @@ export class IndexPageComponent implements OnInit, OnDestroy {
 
   onCanceledSearch() {
     const queryParams: Params = {};
+
     queryParams[QueryParams.DEPT_SEQ] = String(this.deptSeq);
     this._navigate(queryParams);
   }
diff --git a/src/app/pages/organization/components/sidenav.page.component.html b/src/app/pages/organization/components/sidenav.page.component.html
index e351468..e186b26 100644
--- a/src/app/pages/organization/components/sidenav.page.component.html
+++ b/src/app/pages/organization/components/sidenav.page.component.html
@@ -12,6 +12,7 @@
   <div fxFlex="1 1 auto">
     <app-organization-tree
       [initialExpanded]="initialExpanded"
+      [windowSizeMode]="windowSizeMode"
       (clicked)="onClickedTree($event)"
     ></app-organization-tree>
   </div>
diff --git a/src/app/pages/organization/components/sidenav.page.component.ts b/src/app/pages/organization/components/sidenav.page.component.ts
index 67beca3..d16a659c 100644
--- a/src/app/pages/organization/components/sidenav.page.component.ts
+++ b/src/app/pages/organization/components/sidenav.page.component.ts
@@ -12,12 +12,17 @@ import { Router, ActivatedRoute, Params } from '@angular/router';
 
 import { Store, select } from '@ngrx/store';
 
+import { DeptInfo } from '@ucap/domain-organization';
+
 import { LogService } from '@ucap/ng-logger';
-import { DeptInfo } from '@ucap/protocol-query';
 
 import { DepartmentSelector, UserSelector } from '@ucap/ng-store-organization';
 import { LoginSelector } from '@ucap/ng-store-authentication';
 
+import { AppUiService } from '@app/services/app-ui.service';
+import { AppSelector } from '@app/store/state';
+import { WindowSizeMode } from '@app/types/window-size-mode.type';
+
 import { environment } from '@environments';
 
 import { QueryParams } from '../types/params.type';
@@ -32,6 +37,7 @@ export class SidenavPageComponent implements OnInit, OnDestroy {
   initialExpanded: number;
   displayRoot = false;
   displayRootDept: DeptInfo;
+  windowSizeMode: WindowSizeMode;
 
   private ngOnDestroySubject: Subject<void> = new Subject();
 
@@ -40,6 +46,7 @@ export class SidenavPageComponent implements OnInit, OnDestroy {
     private activatedRoute: ActivatedRoute,
     private store: Store<any>,
     private changeDetectorRef: ChangeDetectorRef,
+    private appUiService: AppUiService,
     private logService: LogService
   ) {
     this.logService.info('app-pages-ogranization-sidenav');
@@ -91,6 +98,15 @@ export class SidenavPageComponent implements OnInit, OnDestroy {
           }
         }
       });
+
+    this.store
+      .pipe(
+        takeUntil(this.ngOnDestroySubject),
+        select(AppSelector.windowSizeMode)
+      )
+      .subscribe((windowSizeMode) => {
+        this.windowSizeMode = windowSizeMode;
+      });
   }
 
   ngOnDestroy(): void {
@@ -103,7 +119,6 @@ export class SidenavPageComponent implements OnInit, OnDestroy {
   onClickedTree(node: DeptInfo) {
     const queryParams: Params = {};
     queryParams[QueryParams.DEPT_SEQ] = String(node.seq);
-
     this.router.navigate(
       [
         'organization',
@@ -115,5 +130,6 @@ export class SidenavPageComponent implements OnInit, OnDestroy {
         queryParams
       }
     );
+    this.appUiService.closeLeftSidenavOnNarrowMode();
   }
 }
diff --git a/src/app/pages/organization/organization.page.module.ts b/src/app/pages/organization/organization.page.module.ts
index 333d8fa..3a0b713 100644
--- a/src/app/pages/organization/organization.page.module.ts
+++ b/src/app/pages/organization/organization.page.module.ts
@@ -13,7 +13,7 @@ import { AppOrganizationRoutingPageModule } from './organization-routing.page.mo
 
 import { COMPONENTS } from './components';
 import { I18nModule, UCAP_I18N_NAMESPACE } from '@ucap/ng-i18n';
-import { UiModule } from '@ucap/ng-ui';
+// import { UiModule } from '@ucap/ng-ui';
 import { OrganizationUiModule } from '@ucap/ng-ui-organization';
 
 @NgModule({
@@ -30,8 +30,7 @@ import { OrganizationUiModule } from '@ucap/ng-ui-organization';
     AppOrganizationRoutingPageModule,
 
     I18nModule,
-    OrganizationUiModule,
-    UiModule
+    OrganizationUiModule
   ],
   declarations: [...COMPONENTS],
   entryComponents: [],
diff --git a/src/app/resolvers/app-session.resolver.ts b/src/app/resolvers/app-session.resolver.ts
index c11c7bc..859f780 100644
--- a/src/app/resolvers/app-session.resolver.ts
+++ b/src/app/resolvers/app-session.resolver.ts
@@ -101,13 +101,13 @@ export class AppSessionResolver implements Resolve<void> {
 
               this.store.dispatch(
                 ConfigurationActions.versionInfo2Success({
-                  res: versionInfo2Res
+                  versionInfo: versionInfo2Res.versionInfo
                 })
               );
 
               this.store.dispatch(
                 ConfigurationActions.urlInfoSuccess({
-                  res: urlInfoRes
+                  urlInfo: urlInfoRes.urlInfo
                 })
               );
 
@@ -128,7 +128,9 @@ export class AppSessionResolver implements Resolve<void> {
                   }
                 );
 
-              this.protocolService.connect(versionInfo2Res.serverIp);
+              this.protocolService.connect(
+                versionInfo2Res.versionInfo.serverIp
+              );
             },
             (error) => {
               reject(error);
diff --git a/src/app/sections/account/account.section.module.ts b/src/app/sections/account/account.section.module.ts
index 2c1baf9..f87ff2f 100644
--- a/src/app/sections/account/account.section.module.ts
+++ b/src/app/sections/account/account.section.module.ts
@@ -13,7 +13,7 @@ import { MatSelectModule } from '@angular/material/select';
 import { MatTabsModule } from '@angular/material/tabs';
 
 import { I18nModule } from '@ucap/ng-i18n';
-import { UiModule } from '@ucap/ng-ui';
+// import { UiModule } from '@ucap/ng-ui';
 import { AuthenticationUiModule } from '@ucap/ng-ui-authentication';
 import { OrganizationUiModule } from '@ucap/ng-ui-organization';
 
@@ -38,7 +38,6 @@ import { COMPONENTS } from './components';
 
     I18nModule,
 
-    UiModule,
     AuthenticationUiModule,
     OrganizationUiModule,
 
diff --git a/src/app/sections/call/call.section.module.ts b/src/app/sections/call/call.section.module.ts
new file mode 100644
index 0000000..84ca281
--- /dev/null
+++ b/src/app/sections/call/call.section.module.ts
@@ -0,0 +1,63 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { FlexLayoutModule } from '@angular/flex-layout';
+
+import { ScrollingModule } from '@angular/cdk/scrolling';
+
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+
+import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
+
+import { I18nModule, UCAP_I18N_NAMESPACE } from '@ucap/ng-i18n';
+// import { UiModule } from '@ucap/ng-ui';
+import { CallUiModule } from '@ucap/ng-ui-call';
+import { OrganizationUiModule } from '@ucap/ng-ui-organization';
+
+import { AppLayoutsModule } from '@app/layouts/layouts.module';
+import { AppOrganizationModule } from '@app/ucap/organization/organization.module';
+import { AppGroupSectionModule } from '../group/group.section.module';
+
+import { COMPONENTS } from './components';
+import { DIALOGS } from './dialogs';
+import { AppCallModule } from '@app/ucap/call/call.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FlexLayoutModule,
+
+    MatIconModule,
+    MatButtonModule,
+    MatTooltipModule,
+    MatTabsModule,
+    MatProgressBarModule,
+
+    PerfectScrollbarModule,
+    ScrollingModule,
+
+    I18nModule,
+
+    AppLayoutsModule,
+    AppGroupSectionModule,
+    AppOrganizationModule,
+    AppCallModule,
+
+    CallUiModule,
+    OrganizationUiModule
+  ],
+  exports: [...COMPONENTS, ...DIALOGS],
+  declarations: [...COMPONENTS, ...DIALOGS],
+  entryComponents: [...DIALOGS],
+  providers: [
+    {
+      provide: UCAP_I18N_NAMESPACE,
+      useValue: ['call', 'common']
+    }
+  ]
+})
+export class AppCallSectionModule {}
diff --git a/src/app/sections/call/components/index.ts b/src/app/sections/call/components/index.ts
new file mode 100644
index 0000000..2e1b763
--- /dev/null
+++ b/src/app/sections/call/components/index.ts
@@ -0,0 +1,4 @@
+import { InfoSectionComponent } from './info.section.component';
+import { ListSectionComponent } from './list.section.component';
+
+export const COMPONENTS = [InfoSectionComponent, ListSectionComponent];
diff --git a/src/app/sections/call/components/info.section.component.html b/src/app/sections/call/components/info.section.component.html
new file mode 100644
index 0000000..6fd754e
--- /dev/null
+++ b/src/app/sections/call/components/info.section.component.html
@@ -0,0 +1,28 @@
+<div class="app-sections-call-info-container" fxLayout="row">
+  <div class="history-all" fxFlex="1 1 auto">
+    <div class="subtitle2">{{ 'call:label.callHistory' | ucapI18n }}</div>
+    <div class="list-container">
+      <app-call-time-line
+        [historyList]="originalHistoryList"
+      ></app-call-time-line>
+    </div>
+  </div>
+  <div class="history-other" fxFlex="44%">
+    <div class="history-away">
+      <div class="subtitle2">{{ 'call:label.missed' | ucapI18n }}</div>
+      <div class="list-container">
+        <app-call-time-line
+          [historyList]="awayHistoryList"
+        ></app-call-time-line>
+      </div>
+    </div>
+    <div class="history-noreply">
+      <div class="subtitle2">{{ 'call:label.unanswered' | ucapI18n }}</div>
+      <div class="list-container">
+        <app-call-time-line
+          [historyList]="unansweredHistoryList"
+        ></app-call-time-line>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/app/sections/call/components/info.section.component.scss b/src/app/sections/call/components/info.section.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/sections/call/components/info.section.component.spec.ts b/src/app/sections/call/components/info.section.component.spec.ts
new file mode 100644
index 0000000..9fe87da
--- /dev/null
+++ b/src/app/sections/call/components/info.section.component.spec.ts
@@ -0,0 +1,32 @@
+import { TestBed, async } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { InfoSectionComponent } from './info.section.component';
+
+describe('app::sections::group::InfoSectionComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [RouterTestingModule],
+      declarations: [InfoSectionComponent]
+    }).compileComponents();
+  }));
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(InfoSectionComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'ucap-lg-web'`, () => {
+    const fixture = TestBed.createComponent(InfoSectionComponent);
+    const app = fixture.componentInstance;
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(InfoSectionComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement;
+    expect(compiled.querySelector('.content span').textContent).toContain(
+      'ucap-lg-web app is running!'
+    );
+  });
+});
diff --git a/src/app/sections/call/components/info.section.component.ts b/src/app/sections/call/components/info.section.component.ts
new file mode 100644
index 0000000..c118d5d
--- /dev/null
+++ b/src/app/sections/call/components/info.section.component.ts
@@ -0,0 +1,106 @@
+import {
+  Component,
+  OnInit,
+  OnDestroy,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Input
+} from '@angular/core';
+import { Store, select } from '@ngrx/store';
+import { Subject, combineLatest } from 'rxjs';
+import { takeUntil, withLatestFrom } from 'rxjs/operators';
+import { CallSelector } from '@ucap/ng-store-call';
+import { CallHistory, CallResultType } from '@ucap/domain-call';
+import { ActivatedRoute } from '@angular/router';
+import { UserSelector } from '@ucap/ng-store-organization';
+import { QueryParams } from '@app/pages/call/types/params.type';
+
+@Component({
+  selector: 'app-sections-call-info',
+  templateUrl: './info.section.component.html',
+  styleUrls: ['./info.section.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class InfoSectionComponent implements OnInit, OnDestroy {
+  isMe: boolean;
+  userSeq: string;
+
+  originalHistoryList: CallHistory[];
+  awayHistoryList: CallHistory[];
+  unansweredHistoryList: CallHistory[];
+
+  private ngOnDestroySubject: Subject<void> = new Subject();
+  constructor(
+    private store: Store<any>,
+    private activatedRoute: ActivatedRoute,
+    private changeDetectorRef: ChangeDetectorRef
+  ) {}
+
+  ngOnInit(): void {
+    combineLatest([
+      this.activatedRoute.queryParams,
+      this.store.pipe(select(CallSelector.callHistory))
+    ])
+      .pipe(
+        takeUntil(this.ngOnDestroySubject),
+        withLatestFrom(this.store.pipe(select(UserSelector.user)))
+      )
+      .subscribe(([[params, callHistory], user]) => {
+        let existParams = false;
+        if (!!params) {
+          const seqParam = params[QueryParams.ID];
+          // initializing by userSeq Change.
+          if (this.userSeq !== seqParam) {
+          }
+          // setting userSeq.
+          this.userSeq = !!seqParam
+            ? seqParam
+            : !!user
+            ? String(user.info.seq)
+            : undefined;
+          if (!!user && this.userSeq === String(user.info.seq)) {
+            this.isMe = true;
+          } else {
+            this.isMe = false;
+          }
+
+          this.originalHistoryList = callHistory;
+
+          this.getFiltered();
+        }
+      });
+  }
+
+  ngOnDestroy(): void {
+    if (!!this.ngOnDestroySubject) {
+      this.ngOnDestroySubject.next();
+      this.ngOnDestroySubject.complete();
+    }
+  }
+
+  getFiltered(): void {
+    // original
+    this.originalHistoryList = this.originalHistoryList.filter((item) => {
+      let result = true;
+      if (!this.isMe && !!this.userSeq) {
+        if (!!item.sendYn && item.sendYn === true) {
+          result = item.calledUserSeq === this.userSeq;
+        } else {
+          result = item.callingUserSeq === this.userSeq;
+        }
+      }
+      return result;
+    });
+
+    // away
+    this.awayHistoryList = this.originalHistoryList.filter(
+      (item) => item.callResult === CallResultType.Away
+    );
+    // unanswered
+    this.unansweredHistoryList = this.originalHistoryList.filter(
+      (item) => item.callResult === CallResultType.Missed
+    );
+
+    this.changeDetectorRef.markForCheck();
+  }
+}
diff --git a/src/app/sections/call/components/list.section.component.html b/src/app/sections/call/components/list.section.component.html
new file mode 100644
index 0000000..45c77e9
--- /dev/null
+++ b/src/app/sections/call/components/list.section.component.html
@@ -0,0 +1,132 @@
+<div fxFlexFill class="list-container">
+  <div class="select-call-section-content">
+    <mat-tab-group
+      #selectUserTabGroup
+      mat-stretch-tabs
+      class="tap-container tab_num2"
+    >
+      <mat-tab>
+        <ng-template mat-tab-label>
+          <p>
+            <mat-icon>history</mat-icon>
+          </p>
+        </ng-template>
+        <ng-template matTabContent>
+          <div fxFlexFill class="select-tap">
+            <div class="sub-title">
+              {{ 'call:label.callHistory' | ucapI18n
+              }}<strong>{{ filteredCallHistory.length }}</strong>
+            </div>
+            <div class="btns">
+              <button
+                mat-button
+                [ngClass]="filteringByTypeClass(CallHistorySearchType.All)"
+                (click)="filteringByType(CallHistorySearchType.All)"
+              >
+                {{ 'call:label.all' | ucapI18n }}
+              </button>
+              <button
+                mat-button
+                [ngClass]="filteringByTypeClass(CallHistorySearchType.Send)"
+                (click)="filteringByType(CallHistorySearchType.Send)"
+              >
+                {{ 'call:label.send' | ucapI18n }}
+              </button>
+              <button
+                mat-button
+                [ngClass]="filteringByTypeClass(CallHistorySearchType.Receive)"
+                (click)="filteringByType(CallHistorySearchType.Receive)"
+              >
+                {{ 'call:label.recieve' | ucapI18n }}
+              </button>
+              <button
+                mat-button
+                [ngClass]="filteringByTypeClass(CallHistorySearchType.Missed)"
+                (click)="filteringByType(CallHistorySearchType.Missed)"
+              >
+                {{ 'call:label.missed' | ucapI18n }}
+              </button>
+              <button
+                mat-button
+                [ngClass]="
+                  filteringByTypeClass(CallHistorySearchType.UnAnswered)
+                "
+                (click)="filteringByType(CallHistorySearchType.UnAnswered)"
+              >
+                {{ 'call:label.unanswered' | ucapI18n }}
+              </button>
+            </div>
+            <div class="list">
+              <app-call-history-expansion [itemList]="filteredCallHistory">
+              </app-call-history-expansion>
+            </div>
+          </div>
+        </ng-template>
+      </mat-tab>
+      <mat-tab>
+        <ng-template mat-tab-label>
+          <p>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="21"
+              height="19"
+              viewBox="0 0 21 19"
+            >
+              <g
+                id="icon_gnb_organiztion_g32"
+                transform="translate(-12.917 -220.25)"
+              >
+                <g class="prefix__cls-1" transform="translate(19.917 220.25)">
+                  <circle cx="3.5" cy="3.5" r="3.5" class="prefix__cls-3" />
+                  <circle cx="3.5" cy="3.5" r="2.5" class="prefix__cls-4" />
+                </g>
+                <g class="prefix__cls-1" transform="translate(12.917 232.25)">
+                  <circle cx="3.5" cy="3.5" r="3.5" class="prefix__cls-3" />
+                  <circle cx="3.5" cy="3.5" r="2.5" class="prefix__cls-4" />
+                </g>
+                <g class="prefix__cls-1" transform="translate(19.917 232.25)">
+                  <circle cx="3.5" cy="3.5" r="3.5" class="prefix__cls-3" />
+                  <circle cx="3.5" cy="3.5" r="2.5" class="prefix__cls-4" />
+                </g>
+                <g class="prefix__cls-1" transform="translate(26.917 232.25)">
+                  <circle cx="3.5" cy="3.5" r="3.5" class="prefix__cls-3" />
+                  <circle cx="3.5" cy="3.5" r="2.5" class="prefix__cls-4" />
+                </g>
+                <path
+                  d="M16.5 233.312v-3.437h13.833v3.438"
+                  transform="translate(0 -1.087)"
+                  style="
+                    stroke-linecap: round;
+                    stroke-linejoin: round;
+                    stroke: #999;
+                    stroke-width: 2px;
+                    fill: none;
+                  "
+                />
+                <path
+                  d="M0 0L0 6"
+                  class="prefix__cls-1"
+                  transform="translate(23.417 226.75)"
+                />
+              </g>
+            </svg>
+          </p>
+        </ng-template>
+        <ng-template matTabContent>
+          <div fxFlexFill class="select-tap">
+            <div class="sub-title">
+              {{ 'call:label.organization' | ucapI18n }}
+            </div>
+            <div class="list">
+              <app-organization-profile-navigation-list
+                [checkable]="false"
+                [useFAB]="true"
+              >
+              </app-organization-profile-navigation-list>
+            </div>
+          </div>
+        </ng-template>
+      </mat-tab>
+    </mat-tab-group>
+  </div>
+</div>
diff --git a/src/app/sections/call/components/list.section.component.scss b/src/app/sections/call/components/list.section.component.scss
new file mode 100644
index 0000000..c8df08e
--- /dev/null
+++ b/src/app/sections/call/components/list.section.component.scss
@@ -0,0 +1,4 @@
+.list-container {
+  height: calc(100% - 100px) !important;
+  min-height: auto !important;
+}
diff --git a/src/app/sections/call/components/list.section.component.spec.ts b/src/app/sections/call/components/list.section.component.spec.ts
new file mode 100644
index 0000000..c60a7bb
--- /dev/null
+++ b/src/app/sections/call/components/list.section.component.spec.ts
@@ -0,0 +1,32 @@
+import { TestBed, async } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { ListSectionComponent } from './list.section.component';
+
+describe('app::sections::group::ListSectionComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [RouterTestingModule],
+      declarations: [ListSectionComponent]
+    }).compileComponents();
+  }));
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(ListSectionComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'ucap-lg-web'`, () => {
+    const fixture = TestBed.createComponent(ListSectionComponent);
+    const app = fixture.componentInstance;
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(ListSectionComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement;
+    expect(compiled.querySelector('.content span').textContent).toContain(
+      'ucap-lg-web app is running!'
+    );
+  });
+});
diff --git a/src/app/sections/call/components/list.section.component.ts b/src/app/sections/call/components/list.section.component.ts
new file mode 100644
index 0000000..36c814d
--- /dev/null
+++ b/src/app/sections/call/components/list.section.component.ts
@@ -0,0 +1,114 @@
+import { Subject } from 'rxjs';
+
+import {
+  Component,
+  OnInit,
+  OnDestroy,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Input
+} from '@angular/core';
+
+import { LogService } from '@ucap/ng-logger';
+
+import { SearchData } from '@app/ucap/organization/models/search-data';
+import { Store, select } from '@ngrx/store';
+import { takeUntil } from 'rxjs/operators';
+import { CallSelector } from '@ucap/ng-store-call';
+import {
+  CallHistory,
+  CallHistorySearchType,
+  CallResultType
+} from '@ucap/domain-call';
+
+@Component({
+  selector: 'app-sections-call-list',
+  templateUrl: './list.section.component.html',
+  styleUrls: ['./list.section.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ListSectionComponent implements OnInit, OnDestroy {
+  @Input()
+  set searchObj(obj: SearchData) {
+    this._getFiltered();
+  }
+  get searchObj(): SearchData {
+    return this._searchObj;
+  }
+  // tslint:disable-next-line: variable-name
+  _searchObj: SearchData;
+
+  callHistory: CallHistory[];
+  filteredCallHistory: CallHistory[];
+
+  searchType = CallHistorySearchType.All;
+  CallHistorySearchType = CallHistorySearchType;
+
+  private ngOnDestroySubject: Subject<void> = new Subject();
+  constructor(
+    private store: Store<any>,
+    private changeDetectorRef: ChangeDetectorRef,
+    private logService: LogService
+  ) {}
+
+  ngOnInit(): void {
+    this.store
+      .pipe(
+        takeUntil(this.ngOnDestroySubject),
+        select(CallSelector.callHistory)
+      )
+      .subscribe((callHistory) => {
+        this.callHistory = callHistory;
+        this._getFiltered();
+      });
+  }
+
+  ngOnDestroy(): void {
+    if (!!this.ngOnDestroySubject) {
+      this.ngOnDestroySubject.next();
+      this.ngOnDestroySubject.complete();
+    }
+  }
+
+  filteringByTypeClass(searchType: CallHistorySearchType): string {
+    return this.searchType === searchType ? 'cdk-active' : '';
+  }
+  filteringByType(searchType: CallHistorySearchType) {
+    this.searchType = searchType;
+    this._getFiltered();
+  }
+
+  private _getFiltered() {
+    if (!!this.callHistory && this.callHistory.length > 0) {
+      switch (this.searchType) {
+        case CallHistorySearchType.Send:
+          this.filteredCallHistory = this.callHistory.filter(
+            (item) => !!item.sendYn
+          );
+          break;
+        case CallHistorySearchType.Receive:
+          this.filteredCallHistory = this.callHistory.filter(
+            (item) => !item.sendYn
+          );
+          break;
+        case CallHistorySearchType.Missed:
+          this.filteredCallHistory = this.callHistory.filter(
+            (item) => item.callResult === CallResultType.Away
+          );
+          break;
+        case CallHistorySearchType.UnAnswered:
+          this.filteredCallHistory = this.callHistory.filter(
+            (item) => item.callResult === CallResultType.Missed
+          );
+          break;
+        default:
+          // case CallHistorySearchType.All:
+          this.filteredCallHistory = this.callHistory;
+          break;
+      }
+    } else {
+      this.filteredCallHistory = [];
+    }
+    this.changeDetectorRef.markForCheck();
+  }
+}
diff --git a/src/app/sections/call/dialogs/dialpad.dialog.component.html b/src/app/sections/call/dialogs/dialpad.dialog.component.html
new file mode 100644
index 0000000..4099f71
--- /dev/null
+++ b/src/app/sections/call/dialogs/dialpad.dialog.component.html
@@ -0,0 +1,14 @@
+<div class="dialog-container">
+  <app-layouts-default-dialog
+    [disableClose]="false"
+    (closed)="onClosed($event)"
+    class="ucap-dialog-call-dialpad-container"
+  >
+    <div appLayoutsDefaultDialog="header">
+      {{ 'call:label.dialpad' | ucapI18n }}
+    </div>
+    <div class="dialog-body" appLayoutsDefaultDialog="body">
+      <ucap-call-dialpad (sendCall)="onSendCall($event)"></ucap-call-dialpad>
+    </div>
+  </app-layouts-default-dialog>
+</div>
diff --git a/src/app/sections/call/dialogs/dialpad.dialog.component.scss b/src/app/sections/call/dialogs/dialpad.dialog.component.scss
new file mode 100644
index 0000000..c9e145d
--- /dev/null
+++ b/src/app/sections/call/dialogs/dialpad.dialog.component.scss
@@ -0,0 +1,75 @@
+@import '~@ucap/lg-scss/mixins';
+.dialog-container {
+  width: 100%;
+  height: 100%;
+
+  .dialog-body {
+    width: 100%;
+    height: 100%;
+    .profile {
+      display: flex;
+      flex-direction: row;
+      padding-bottom: 10px;
+      margin-bottom: 10px;
+      border-bottom: 1px solid #ccc;
+      .profile-image {
+        border-radius: 50%;
+        overflow: hidden;
+        width: 36px;
+        height: 36px;
+        margin-left: 0;
+        background-color: #ffe8cb;
+        img {
+          max-width: 100%;
+          height: auto;
+          vertical-align: top;
+          border: none;
+        }
+      }
+      .user-info {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: flex-start;
+        padding-left: 16px;
+        .user-n-g {
+          display: flex;
+          flex-flow: row-reverse nowrap;
+          align-items: flex-end;
+          height: 22px;
+          .user-name {
+            @include ellipsis-column(1);
+            height: 22px;
+            font-size: 14px;
+            font-weight: 600;
+            order: 1;
+            -ms-flex-order: 1;
+          }
+          .user-grade {
+            @include ellipsis(1);
+            align-self: stretch;
+            font: {
+              size: 13px;
+            }
+            margin-left: 4px;
+            order: 0;
+            -ms-flex-order: 0;
+          }
+          .write-date {
+            font-size: 12px;
+          }
+        }
+      }
+    }
+    .contents {
+      width: 100%;
+      height: calc(100% - 60px);
+      overflow: hidden;
+      perfect-scrollbar {
+        width: 100%;
+        height: 100%;
+        padding-right: 10px;
+      }
+    }
+  }
+}
diff --git a/src/app/sections/call/dialogs/dialpad.dialog.component.spec.ts b/src/app/sections/call/dialogs/dialpad.dialog.component.spec.ts
new file mode 100644
index 0000000..550915f
--- /dev/null
+++ b/src/app/sections/call/dialogs/dialpad.dialog.component.spec.ts
@@ -0,0 +1,26 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { TextDetailDialogComponent } from './text-detail.dialog.component';
+
+describe('ucap::ui-organization::CreateChatDialogComponent', () => {
+  let component: TextDetailDialogComponent;
+  let fixture: ComponentFixture<TextDetailDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [TextDetailDialogComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TextDetailDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/sections/call/dialogs/dialpad.dialog.component.ts b/src/app/sections/call/dialogs/dialpad.dialog.component.ts
new file mode 100644
index 0000000..8495d11
--- /dev/null
+++ b/src/app/sections/call/dialogs/dialpad.dialog.component.ts
@@ -0,0 +1,86 @@
+import {
+  Component,
+  OnInit,
+  OnDestroy,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Inject
+} from '@angular/core';
+
+import {
+  MatDialogRef,
+  MAT_DIALOG_DATA,
+  MatDialog
+} from '@angular/material/dialog';
+
+import { Subject } from 'rxjs';
+import { Store, select } from '@ngrx/store';
+import { takeUntil } from 'rxjs/operators';
+
+import { User } from '@ucap/domain-organization';
+import { UserSelector } from '@ucap/ng-store-organization';
+import { LoginSelector } from '@ucap/ng-store-authentication';
+import { AppCallService } from '@app/services/app-call.service';
+import { AppAuthenticationService } from '@app/services/app-authentication.service';
+import { LoginSession, LoginInfo } from '@ucap/domain-authentication';
+
+export interface DialpadDialogData {}
+export interface DialpadDialogResult {}
+
+@Component({
+  selector: 'app-dialog-call-dialpad',
+  templateUrl: './dialpad.dialog.component.html',
+  styleUrls: ['./dialpad.dialog.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DialpadDialogComponent implements OnInit, OnDestroy {
+  loginSession: LoginSession;
+  loginInfo: LoginInfo;
+  user: User;
+
+  private ngOnDestroySubject: Subject<void> = new Subject();
+  constructor(
+    private store: Store<any>,
+    public dialogRef: MatDialogRef<DialpadDialogData, DialpadDialogResult>,
+    @Inject(MAT_DIALOG_DATA) public data: DialpadDialogData,
+    private appCallService: AppCallService,
+    private appAuthenticationService: AppAuthenticationService,
+    private changeDetectorRef: ChangeDetectorRef
+  ) {}
+
+  ngOnInit(): void {
+    this.loginSession = this.appAuthenticationService.getLoginSession();
+    this.store
+      .pipe(takeUntil(this.ngOnDestroySubject), select(UserSelector.user))
+      .subscribe((user) => {
+        this.user = user;
+      });
+
+    this.store
+      .pipe(takeUntil(this.ngOnDestroySubject), select(LoginSelector.loginInfo))
+      .subscribe((loginInfo) => {
+        this.loginInfo = loginInfo;
+      });
+  }
+
+  ngOnDestroy(): void {
+    if (!!this.ngOnDestroySubject) {
+      this.ngOnDestroySubject.next();
+      this.ngOnDestroySubject.complete();
+    }
+  }
+
+  onSendCall(calleeNumber: string) {
+    this.appCallService.sendClicktocall(
+      this.loginInfo,
+      this.user,
+      this.loginSession.deviceType,
+      calleeNumber
+    );
+    this.dialogRef.close();
+  }
+
+  onClosed(event: MouseEvent): void {
+    this.dialogRef.close();
+  }
+}
diff --git a/src/app/sections/call/dialogs/index.ts b/src/app/sections/call/dialogs/index.ts
new file mode 100644
index 0000000..b74b0eb
--- /dev/null
+++ b/src/app/sections/call/dialogs/index.ts
@@ -0,0 +1,3 @@
+import { DialpadDialogComponent } from './dialpad.dialog.component';
+
+export const DIALOGS = [DialpadDialogComponent];
diff --git a/src/app/sections/chat/chat.section.module.ts b/src/app/sections/chat/chat.section.module.ts
index bf706f0..6a39e47 100644
--- a/src/app/sections/chat/chat.section.module.ts
+++ b/src/app/sections/chat/chat.section.module.ts
@@ -4,8 +4,6 @@ import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 
 import { FlexLayoutModule } from '@angular/flex-layout';
 
-import { ScrollingModule } from '@angular/cdk/scrolling';
-
 import { MatRippleModule } from '@angular/material/core';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatBadgeModule } from '@angular/material/badge';
@@ -30,7 +28,12 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 
 import { I18nModule, UCAP_I18N_NAMESPACE } from '@ucap/ng-i18n';
-import { UiModule } from '@ucap/ng-ui';
+
+import { UiCoreModule } from '@ucap/ng-ui/core';
+import { UiDateModule } from '@ucap/ng-ui/date';
+import { UiViewerModule } from '@ucap/ng-ui/viewer';
+import { UiscrollingModule } from '@ucap/ng-ui/scrolling';
+
 import { ChatUiModule } from '@ucap/ng-ui-chat';
 import { OrganizationUiModule } from '@ucap/ng-ui-organization';
 import { AppOrganizationModule } from '@app/ucap/organization/organization.module';
@@ -42,6 +45,7 @@ import { AppGroupSectionModule } from '../group/group.section.module';
 import { COMPONENTS } from './components';
 import { DIALOGS } from './dialogs';
 import { DRAWERS } from './drawers';
+import { DIRECTIVES } from './directives';
 import { AppGroupModule } from '@app/ucap/group/group.module';
 
 @NgModule({
@@ -73,10 +77,13 @@ import { AppGroupModule } from '@app/ucap/group/group.module';
     MatProgressBarModule,
 
     PerfectScrollbarModule,
-    ScrollingModule,
 
     I18nModule,
-    UiModule,
+
+    UiCoreModule,
+    UiDateModule,
+    UiViewerModule,
+    UiscrollingModule,
 
     AppLayoutsModule,
     AppGroupSectionModule,
@@ -87,8 +94,8 @@ import { AppGroupModule } from '@app/ucap/group/group.module';
     AppChatModule,
     AppGroupModule
   ],
-  exports: [...COMPONENTS, ...DIALOGS, ...DRAWERS],
-  declarations: [...COMPONENTS, ...DIALOGS, ...DRAWERS],
+  exports: [...COMPONENTS, ...DIALOGS, ...DRAWERS, ...DIRECTIVES],
+  declarations: [...COMPONENTS, ...DIALOGS, ...DRAWERS, ...DIRECTIVES],
   entryComponents: [...DIALOGS, ...DRAWERS],
   providers: [
     {
diff --git a/src/app/sections/chat/components/form.section.component.html b/src/app/sections/chat/components/form.section.component.html
index 2b1baf5..376523f 100644
--- a/src/app/sections/chat/components/form.section.component.html
+++ b/src/app/sections/chat/components/form.section.component.html
@@ -3,15 +3,13 @@
     <app-chat-selector-sticker
       *ngSwitchCase="SelectorType.STICKER"
       (selectedSticker)="onSelectedSticker($event)"
-      (closed)="selectorType = SelectorType.EMPTY"
+      (closed)="clearSelector()"
     >
     </app-chat-selector-sticker>
 
     <app-chat-selector-translation
       *ngSwitchCase="SelectorType.TRANSLATION"
-      (closed)="
-        selectorType = SelectorType.EMPTY; translationPreviewInfo = null
-      "
+      (closed)="clearSelector()"
       [destLocale]="destLocale"
       [simpleView]="translationSimpleview"
       [preView]="translationPreview"
@@ -26,18 +24,36 @@
     <app-chat-selector-file-upload
       #fileUploadSelector
       *ngSwitchCase="SelectorType.FILEUPLOAD"
-      (closed)="selectorType = SelectorType.EMPTY"
+      (closed)="clearSelector()"
     >
     </app-chat-selector-file-upload>
 
     <app-chat-selector-email-send
       *ngSwitchCase="SelectorType.EMAILSENDER"
       (sendEventEmail)="onSendEventEmail($event)"
-      (closed)="selectorType = SelectorType.EMPTY"
+      (closed)="clearSelector()"
     ></app-chat-selector-email-send>
   </ng-container>
 
   <div class="chat-form-area ucap-mat-input-container">
+    <!-- <div class="message-text" fxFlex floatLabel="never" appearance="none">
+      <textarea
+        #messageInput
+        placeholder="{{ 'chat:label.inputChatMessage' | ucapI18n }}"
+        name="message"
+        (keydown)="textareaResize($event, messageInput)"
+        (keydown.enter)="onKeydown($event)"
+      ></textarea>
+    </div> -->
+    <!-- <mat-form-field
+      class="message-text"
+      fxFlex
+      floatLabel="never"
+      appearance="none"
+    >
+      <mat-label>{{ 'chat:label.inputChatMessage' | ucapI18n }}</mat-label>
+      <textarea matInput #messageInput></textarea>
+    </mat-form-field> -->
     <mat-form-field
       class="message-text"
       fxFlex
@@ -45,19 +61,13 @@
       appearance="none"
     >
       <mat-label>{{ 'chat:label.inputChatMessage' | ucapI18n }}</mat-label>
-      <!-- <textarea
+      <textarea
         matInput
         #messageInput
         name="message"
         [matTextareaAutosize]="true"
         (keydown.enter)="onKeydown($event)"
-      ></textarea> -->
-      <input
-        matInput
-        #messageInput
-        name="message"
-        (keydown.enter)="onKeydown($event)"
-      />
+      ></textarea>
     </mat-form-field>
 
     <input
@@ -94,7 +104,7 @@
     </button>
     <!-- <button
       mat-icon-button
-      *ngIf="!!authRes && !!authRes.useCapturePcScreen"
+      *ngIf="!!userPermission && !!userPermission.useCapturePcScreen"
       aria-label="screenshot"
       matTooltipPosition="above"
       matTooltip="{{ 'label.screenshot' | ucapI18n }}"
@@ -115,7 +125,7 @@
     </button>
     <button
       mat-icon-button
-      *ngIf="!!authRes && !!authRes.canSendEmail"
+      *ngIf="!!userPermission && !!userPermission.canSendEmail"
       aria-label="emailSend"
       matTooltipPosition="above"
       matTooltip="{{ 'label.emailSend' | ucapI18n }}"
@@ -126,7 +136,7 @@
     </button>
     <button
       mat-icon-button
-      *ngIf="!!authRes && !!authRes.canTranslation"
+      *ngIf="!!userPermission && !!userPermission.canTranslation"
       aria-label="translation"
       matTooltipPosition="above"
       matTooltip="{{ 'label.translation' | ucapI18n }}"
@@ -137,7 +147,7 @@
     </button>
     <!-- <button
       mat-icon-button
-      *ngIf="!!authRes && !!authRes.useGams"
+      *ngIf="!!userPermission && !!userPermission.useGams"
       aria-label="gams"
       matTooltipPosition="above"
       matTooltip="{{ 'label.gams' | ucapI18n }}"
diff --git a/src/app/sections/chat/components/form.section.component.scss b/src/app/sections/chat/components/form.section.component.scss
index 0017854..b42ba0c 100644
--- a/src/app/sections/chat/components/form.section.component.scss
+++ b/src/app/sections/chat/components/form.section.component.scss
@@ -10,7 +10,7 @@
     max-height: 100%;
     min-height: 20px;
     background-color: $white;
-    padding-left: 30px;
+    padding: 0 20px;
     font-size: 0.929em;
     margin: 8px 0;
     overflow-x: hidden;
@@ -19,9 +19,13 @@
     @include screen(xs) {
       padding-left: 16px;
     }
-    textarea {
-      min-height: 22px;
-      overflow: hidden;
+    .message-text {
+      @include font-family($font-regular);
+      textarea {
+        min-height: 22px;
+        margin: 0;
+        overflow: hidden;
+      }
     }
   }
   .button-area {
diff --git a/src/app/sections/chat/components/form.section.component.ts b/src/app/sections/chat/components/form.section.component.ts
index f187c3c..f334141 100644
--- a/src/app/sections/chat/components/form.section.component.ts
+++ b/src/app/sections/chat/components/form.section.component.ts
@@ -18,28 +18,29 @@ import { Store, select } from '@ngrx/store';
 
 import { MatDialog } from '@angular/material/dialog';
 
+import { FileUploadItem } from '@ucap/domain-common';
+import { User } from '@ucap/domain-organization';
+import { UserPermission } from '@ucap/domain-authorization';
+import {
+  RoomInfo,
+  EventType,
+  MassTranslationEventJson,
+  TranslationEventJson
+} from '@ucap/domain-chat';
+
 import { StickerFilesInfo } from '@ucap/ng-core';
-import { StatusCode, FileUploadItem } from '@ucap/api';
+import { StatusCode } from '@ucap/api';
 import {
   TranslationSaveResponse,
   TranslationSaveRequest
 } from '@ucap/api-common';
-import { VersionInfo2Response } from '@ucap/api-public';
+
 import {
   SendEventMailType,
   SendEventEmailRequest,
   SendEventEmailResponse,
   StatusCode as PiStatusCode
 } from '@ucap/pi';
-import { RoomInfo } from '@ucap/protocol-room';
-import {
-  EventType,
-  MassTranslationEventJson,
-  TranslationEventJson
-} from '@ucap/protocol-event';
-import { LoginResponse } from '@ucap/protocol-authentication';
-import { AuthResponse } from '@ucap/protocol-query';
-import { User } from '@ucap/protocol-info';
 
 import { I18nService } from '@ucap/ng-i18n';
 import { LogService } from '@ucap/ng-logger';
@@ -61,7 +62,7 @@ import {
   ConfirmDialogComponent,
   ConfirmDialogData,
   ConfirmDialogResult
-} from '@ucap/ng-ui';
+} from '@ucap/ng-ui/core';
 
 import { LoginSession } from '@app/models/login-session';
 import { AppAuthenticationService } from '@app/services/app-authentication.service';
@@ -70,6 +71,7 @@ import { FileUploadSelectorComponent } from '@app/ucap/chat/components/file-uplo
 import { AppChatService } from '@app/services/app-chat.service';
 
 import { environment } from '@environments';
+import { LoginInfo, VersionInfo } from '@ucap/domain-authentication';
 
 export enum SelectorType {
   EMPTY = '',
@@ -107,14 +109,17 @@ export class FormSectionComponent implements OnInit, OnDestroy {
   @Output()
   changeTranslationSimpleview = new EventEmitter<boolean>();
 
+  @Output()
+  openFormSelector = new EventEmitter<string>();
+
   @Output()
   eventSendTrigger = new EventEmitter<any>();
 
-  versionInfo2Res: VersionInfo2Response;
+  versionInfo: VersionInfo;
   loginSession: LoginSession;
-  loginRes: LoginResponse;
+  loginInfo: LoginInfo;
   user: User;
-  authRes: AuthResponse;
+  userPermission: UserPermission;
 
   currentRoomInfo: RoomInfo;
 
@@ -125,8 +130,8 @@ export class FormSectionComponent implements OnInit, OnDestroy {
 
   /** About Translation */
   isTranslationProcess = false;
-  translationSimpleview = true;
-  translationPreview = true;
+  translationSimpleview = false;
+  translationPreview = false;
   destLocale = 'en'; // default English :: en
   translationPreviewInfo: {
     previewInfo: TranslationSaveResponse | null;
@@ -159,10 +164,10 @@ export class FormSectionComponent implements OnInit, OnDestroy {
     this.store
       .pipe(
         takeUntil(this.ngOnDestroySubject),
-        select(ConfigurationSelector.versionInfo2Response)
+        select(ConfigurationSelector.versionInfo)
       )
-      .subscribe((versionInfo2Res) => {
-        this.versionInfo2Res = versionInfo2Res;
+      .subscribe((versionInfo) => {
+        this.versionInfo = versionInfo;
       });
 
     this.store
@@ -172,18 +177,18 @@ export class FormSectionComponent implements OnInit, OnDestroy {
       });
 
     this.store
-      .pipe(takeUntil(this.ngOnDestroySubject), select(LoginSelector.loginRes))
-      .subscribe((loginRes) => {
-        this.loginRes = loginRes;
+      .pipe(takeUntil(this.ngOnDestroySubject), select(LoginSelector.loginInfo))
+      .subscribe((loginInfo) => {
+        this.loginInfo = loginInfo;
       });
 
     this.store
       .pipe(
         takeUntil(this.ngOnDestroySubject),
-        select(AuthorizationSelector.authResponse)
+        select(AuthorizationSelector.userPermission)
       )
-      .subscribe((authRes) => {
-        this.authRes = authRes;
+      .subscribe((userPermission) => {
+        this.userPermission = userPermission;
       });
   }
 
@@ -206,9 +211,10 @@ export class FormSectionComponent implements OnInit, OnDestroy {
     this.selectorType = SelectorType.EMPTY;
     this.translationSimpleview = false;
     this.changeTranslationSimpleview.emit(false);
-    this.translationPreview = true;
+    this.translationPreview = false;
     this.destLocale = 'en'; // default English :: en
     this.translationPreviewInfo = null;
+    this.selectedSticker = undefined;
 
     this.store
       .pipe(
@@ -225,11 +231,19 @@ export class FormSectionComponent implements OnInit, OnDestroy {
   /** About Selector */
   onOpenSelector(type: SelectorType): void {
     this.selectorType = type;
-    this.changeDetectorRef.markForCheck();
+
+    this.selectedSticker = null;
+    this.translationPreviewInfo = null;
+
+    this.changeDetectorRef.detectChanges();
+    this.openFormSelector.emit(type);
   }
   clearSelector(): void {
     this.selectorType = SelectorType.EMPTY;
+
     this.selectedSticker = null;
+    this.translationPreviewInfo = null;
+
     this.changeDetectorRef.markForCheck();
   }
 
@@ -246,62 +260,6 @@ export class FormSectionComponent implements OnInit, OnDestroy {
     }
   }
 
-  onChangeFileInput(): void {
-    const self = this;
-    const fileList = this.fileInput.nativeElement.files;
-
-    this.appFileService
-      .validUploadFile(fileList, this.versionInfo2Res?.fileAllowSize)
-      .then((result) => {
-        if (!result) {
-          self.fileInput.nativeElement.value = '';
-          return;
-        } else {
-          // selector open
-          self.onOpenSelector(SelectorType.FILEUPLOAD);
-          self.changeDetectorRef.detectChanges();
-
-          // FileuploadItem Init. & FileSelector Init.
-          const fileUploadItems = FileUploadItem.fromFiles(fileList);
-          if (!!self.fileUploadSelector) {
-            self.fileUploadSelector.onFileSelected(fileUploadItems);
-          }
-          self.fileInput.nativeElement.value = '';
-
-          // File Upload..
-          self.appChatService
-            .sendMessageOfAttachFile(
-              self.loginRes,
-              self.user,
-              self.loginSession.deviceType,
-              self.currentRoomInfo.roomId,
-              fileUploadItems
-            )
-            .then((success) => {
-              if (!!success) {
-                self.clearSelector();
-                if (!!self.fileUploadSelector) {
-                  self.fileUploadSelector.onUploadComplete();
-                }
-              }
-            })
-            .catch((err) => {
-              self.clearSelector();
-              if (!!self.fileUploadSelector) {
-                self.fileUploadSelector.onUploadComplete();
-              }
-
-              const msg = this.i18nService.t('common:file.errors.failToUpload');
-              alert(msg);
-            });
-        }
-      })
-      .catch((err) => {
-        self.fileInput.nativeElement.value = '';
-        self.logService.error(`validUploadFile ${err}`);
-      });
-  }
-
   onKeydown(event: KeyboardEvent) {
     // if (event.key === 'PageUp' || event.key === 'PageDown') {
     //   event.preventDefault();
@@ -311,10 +269,17 @@ export class FormSectionComponent implements OnInit, OnDestroy {
     //   this.send();
     // }
     event.preventDefault();
-    event.stopPropagation();
     this.send();
   }
 
+  textareaResize(event: KeyboardEvent, obj) {
+    const self = obj;
+    setTimeout(() => {
+      self.style.height = '1px';
+      self.style.height = self.scrollHeight + 'px';
+    });
+  }
+
   onSelectedSticker(stickerInfo: StickerFilesInfo) {
     this.selectedSticker = stickerInfo;
     this.focus(false);
@@ -412,7 +377,7 @@ export class FormSectionComponent implements OnInit, OnDestroy {
     ) {
       /** CASE : MASS TEXT */
       this.appChatService.sendMessageOfMassText(
-        this.loginRes,
+        this.loginInfo,
         this.user,
         this.loginSession.deviceType,
         roomId,
@@ -437,7 +402,7 @@ export class FormSectionComponent implements OnInit, OnDestroy {
     this.commonApiService
       .translationSave({
         userSeq: String(this.user.info.seq),
-        token: this.loginRes.tokenString,
+        token: this.loginInfo.tokenString,
         deviceType: this.loginSession.deviceType,
         original: message,
         roomId: this.roomId,
@@ -547,6 +512,7 @@ export class FormSectionComponent implements OnInit, OnDestroy {
       sentMessage
     );
     this.translationPreviewInfo = undefined;
+    this.eventSendTrigger.emit(0);
     this.focus();
   }
 
@@ -580,7 +546,7 @@ export class FormSectionComponent implements OnInit, OnDestroy {
                 const req: SendEventEmailRequest = {
                   userSeq: String(this.user.info.seq),
                   deviceType: this.loginSession.deviceType,
-                  tokenKey: this.loginRes.tokenString,
+                  tokenKey: this.loginInfo.tokenString,
                   roomSeq: this._roomId,
                   eventSeq: String(eventList[0].seq),
                   sendType: type
@@ -624,4 +590,100 @@ export class FormSectionComponent implements OnInit, OnDestroy {
         }
       });
   }
+
+  /**
+   * About File Upload
+   */
+  /** FileInput change event. */
+  onChangeFileInput(): void {
+    const fileList = this.fileInput.nativeElement.files;
+    this._fileSend(fileList);
+  }
+
+  /** DragAndDrop :: Add fileupload queue. not sending. */
+  onDragAndDropStandbyFileupload(fileList: FileList) {
+    const self = this;
+    this.appFileService
+      .validUploadFile(fileList, this.versionInfo?.fileAllowSize)
+      .then((result) => {
+        if (!result) {
+          self.fileInput.nativeElement.value = '';
+          return;
+        } else {
+          // selector open
+          self.onOpenSelector(SelectorType.FILEUPLOAD);
+
+          // FileuploadItem Init. & FileSelector Init.
+          const fileUploadItems = FileUploadItem.fromFiles(fileList);
+          if (!!self.fileUploadSelector) {
+            self.fileUploadSelector.onFileSelected(fileUploadItems);
+          }
+          self.fileInput.nativeElement.value = '';
+        }
+      })
+      .catch((err) => {
+        self.fileInput.nativeElement.value = '';
+        self.logService.error(`validUploadFile ${err}`);
+      });
+  }
+
+  /** DragAndDrop :: fileUpload direct. */
+  onDragAndDropFileupload(fileList: FileList): void {
+    this._fileSend(fileList);
+  }
+
+  private _fileSend(fileList: FileList) {
+    const self = this;
+    this.appFileService
+      .validUploadFile(fileList, this.versionInfo?.fileAllowSize)
+      .then((result) => {
+        if (!result) {
+          self.fileInput.nativeElement.value = '';
+          return;
+        } else {
+          // selector open
+          self.onOpenSelector(SelectorType.FILEUPLOAD);
+          self.changeDetectorRef.detectChanges();
+
+          // FileuploadItem Init. & FileSelector Init.
+          const fileUploadItems = FileUploadItem.fromFiles(fileList);
+          if (!!self.fileUploadSelector) {
+            self.fileUploadSelector.onFileSelected(fileUploadItems);
+          }
+          self.fileInput.nativeElement.value = '';
+
+          // File Upload..
+          self.appChatService
+            .sendMessageOfAttachFile(
+              self.loginInfo,
+              self.user,
+              self.loginSession.deviceType,
+              self.currentRoomInfo.roomId,
+              fileUploadItems
+            )
+            .then((success) => {
+              if (!!success) {
+                self.eventSendTrigger.emit(0);
+                self.clearSelector();
+                if (!!self.fileUploadSelector) {
+                  self.fileUploadSelector.onUploadComplete();
+                }
+              }
+            })
+            .catch((err) => {
+              self.clearSelector();
+              if (!!self.fileUploadSelector) {
+                self.fileUploadSelector.onUploadComplete();
+              }
+
+              const msg = this.i18nService.t('common:file.errors.failToUpload');
+              alert(msg);
+            });
+        }
+      })
+      .catch((err) => {
+        self.fileInput.nativeElement.value = '';
+        self.logService.error(`validUploadFile ${err}`);
+      });
+  }
 }
diff --git a/src/app/sections/chat/components/info.section.component.html b/src/app/sections/chat/components/info.section.component.html
index 57ead93..877ac5b 100644
--- a/src/app/sections/chat/components/info.section.component.html
+++ b/src/app/sections/chat/components/info.section.component.html
@@ -1,11 +1,19 @@
 <mat-toolbar class="info-chat-toolbar">
   <mat-toolbar-row class="info-chat-toolbar-content">
     <div class="chat-room-profile">
-      <div class="profile-image">
+      <div
+        class="profile-image"
+        (click)="onOpenProfile()"
+        [style.cursor]="
+          !!currentRoomInfo && currentRoomInfo.roomType === RoomType.Single
+            ? 'pointer'
+            : 'default'
+        "
+      >
         <img
           class="thumbnail"
           ucapImage
-          [base]="versionInfo2Res?.profileRoot"
+          [base]="versionInfo?.profileRoot"
           [path]="roomImage"
           [default]="
             currentRoomInfo?.roomType === RoomType.Multi
diff --git a/src/app/sections/chat/components/info.section.component.ts b/src/app/sections/chat/components/info.section.component.ts
index 40541e8..852e4f6 100644
--- a/src/app/sections/chat/components/info.section.component.ts
+++ b/src/app/sections/chat/components/info.section.component.ts
@@ -13,15 +13,16 @@ import {
 } from '@angular/core';
 
 import { Store, select } from '@ngrx/store';
-import { Dictionary } from '@ngrx/entity';
 
 import { MatDialog } from '@angular/material/dialog';
 
-import { LocaleCode } from '@ucap/core';
+import { LocaleCode } from '@ucap/domain-common';
+import { User } from '@ucap/domain-organization';
+import { RoomInfo, RoomType } from '@ucap/domain-chat';
+
 import { I18nService } from '@ucap/ng-i18n';
-import { VersionInfo2Response } from '@ucap/api-public';
-import { RoomInfo, RoomType, UpdateRequest } from '@ucap/protocol-room';
-import { User } from '@ucap/protocol-info';
+
+import { UpdateRequest } from '@ucap/protocol-room';
 
 import { UserSelector } from '@ucap/ng-store-organization';
 import { ConfigurationSelector } from '@ucap/ng-store-authentication';
@@ -40,6 +41,12 @@ import {
 import { AppChatService } from '@app/services/app-chat.service';
 import { ChatDrawType } from '@app/pages/chat/types/chat-draw.type';
 import { DrawInfo } from '@app/pages/chat/models/draw-info';
+import {
+  ProfileDialogComponent,
+  ProfileDialogData,
+  ProfileDialogResult
+} from '@app/sections/organization/dialogs/profile.dialog.component';
+import { VersionInfo } from '@ucap/domain-authentication';
 
 @Component({
   selector: 'app-sections-chat-info',
@@ -53,11 +60,13 @@ export class InfoSectionComponent implements OnInit, OnDestroy {
 
   @Input()
   set roomId(roomId: string) {
-    this._roomId = roomId;
+    if (this._roomId !== roomId) {
+      this._roomId = roomId;
 
-    this.roomIdSubject.next(roomId);
+      this.roomIdSubject.next(roomId);
 
-    this.initializeRoomData();
+      this.initializeRoomData();
+    }
 
     // request selected room
     if (!!this.roomId) {
@@ -81,7 +90,7 @@ export class InfoSectionComponent implements OnInit, OnDestroy {
   @Output()
   rightDrawerToggle = new EventEmitter<DrawInfo>();
 
-  versionInfo2Res: VersionInfo2Response;
+  versionInfo: VersionInfo;
   user: User;
 
   defaultProfileImage: string;
@@ -123,10 +132,10 @@ export class InfoSectionComponent implements OnInit, OnDestroy {
     this.store
       .pipe(
         takeUntil(this.ngOnDestroySubject),
-        select(ConfigurationSelector.versionInfo2Response)
+        select(ConfigurationSelector.versionInfo)
       )
-      .subscribe((versionInfo2Res) => {
-        this.versionInfo2Res = versionInfo2Res;
+      .subscribe((versionInfo) => {
+        this.versionInfo = versionInfo;
       });
   }
 
@@ -240,6 +249,36 @@ export class InfoSectionComponent implements OnInit, OnDestroy {
     }
   }
 
+  onOpenProfile(): void {
+    if (
+      !!this.currentRoomInfo &&
+      this.currentRoomInfo.roomType === RoomType.Single
+    ) {
+      const returnValue = this.appChatService.getRoomUserList01(
+        this.user,
+        this.roomUsersMap,
+        this.roomUsersShortMap
+      );
+      if (
+        !!returnValue &&
+        !!returnValue.existUsers &&
+        returnValue.users.length > 0
+      ) {
+        const userSeq = String(returnValue.users[0].seq);
+        this.dialog.open<
+          ProfileDialogComponent,
+          ProfileDialogData,
+          ProfileDialogResult
+        >(ProfileDialogComponent, {
+          panelClass: 'mid-create-dialog',
+          data: {
+            userSeq
+          }
+        });
+      }
+    }
+  }
+
   getShowContextMenu(menuType: string) {
     if (
       ['EVENT', 'ROOM_USERS', 'CHANGE_ROOM_USERS', 'ADD_GROUP', 'SETTING'].some(
diff --git a/src/app/sections/chat/components/list.section.component.scss b/src/app/sections/chat/components/list.section.component.scss
index 063068d..c8df08e 100644
--- a/src/app/sections/chat/components/list.section.component.scss
+++ b/src/app/sections/chat/components/list.section.component.scss
@@ -1,4 +1,4 @@
 .list-container {
-  height: calc(100% - 90px) !important;
+  height: calc(100% - 100px) !important;
   min-height: auto !important;
 }
diff --git a/src/app/sections/chat/components/list.section.component.ts b/src/app/sections/chat/components/list.section.component.ts
index cf1387f..3c14d4b 100644
--- a/src/app/sections/chat/components/list.section.component.ts
+++ b/src/app/sections/chat/components/list.section.component.ts
@@ -11,12 +11,15 @@ import {
   EventEmitter,
   Output
 } from '@angular/core';
+import { Router, ActivatedRoute, Params } from '@angular/router';
+
+import { RoomInfo } from '@ucap/domain-chat';
 
 import { LogService } from '@ucap/ng-logger';
-import { RoomInfo } from '@ucap/protocol-room';
-import { Router, ActivatedRoute, Params } from '@angular/router';
+
 import { QueryParams } from '@app/pages/chat/types/params.type';
 import { SearchInfo } from '@app/pages/chat/models/search-info';
+import { AppChatService } from '@app/services/app-chat.service';
 
 @Component({
   selector: 'app-sections-chat-list',
@@ -51,6 +54,7 @@ export class ListSectionComponent implements OnInit, OnDestroy {
   constructor(
     private router: Router,
     private activatedRoute: ActivatedRoute,
+    private appChatService: AppChatService,
     private changeDetectorRef: ChangeDetectorRef,
     private logService: LogService
   ) {}
@@ -76,17 +80,7 @@ export class ListSectionComponent implements OnInit, OnDestroy {
   }
 
   onOpenChatRoom(roomInfo: RoomInfo): void {
-    this.router.navigate(
-      [
-        'chat',
-        {
-          outlets: { content: 'chatroom' }
-        }
-      ],
-      {
-        queryParams: { roomId: roomInfo.roomId }
-      }
-    );
+    this.appChatService.openRoombyRoomId(roomInfo.roomId);
   }
 
   onSearchResultList(searchResultList: RoomInfo[]) {
diff --git a/src/app/sections/chat/components/message.section.component.html b/src/app/sections/chat/components/message.section.component.html
index cd8b349..bc9a8a9 100644
--- a/src/app/sections/chat/components/message.section.component.html
+++ b/src/app/sections/chat/components/message.section.component.html
@@ -1,23 +1,36 @@
-<div #chatMessagesContainer class="ucap-message-section">
-  <button
-    mat-stroked-button
-    color="accent"
-    class="icon-button-arrow top-position"
-    (click)="gotoScrollToBottom()"
-  >
-    <mat-icon>arrow_downward</mat-icon>
-  </button>
-  <!--대화창 위로 보내기
-    <button
-    mat-stroked-button
-    color="accent"
-    class="icon-button-arrow bottom-position"
-  >
-    <mat-icon>arrow_upward</mat-icon>
-  </button>-->
+<!-- <div class="ucap-message-section"> -->
+<button
+  mat-stroked-button
+  color="accent"
+  class="icon-button-arrow top-position"
+  (click)="gotoScrollToBottom()"
+>
+  <mat-icon>arrow_downward</mat-icon>
+</button>
+<!--대화창 위로 보내기
+      <button
+      mat-stroked-button
+      color="accent"
+      class="icon-button-arrow bottom-position"
+    >
+      <mat-icon>arrow_upward</mat-icon>
+    </button>-->
 
-  <div #chatMessagesList class="chat-area">
-    <div class="ucap-chat-more-event" *ngIf="!!currentChatting?.remainEvent">
+<ucap-virtual-scroll-viewport
+  #vsList
+  fxFlexFill
+  class="ucap-message-section"
+  perfectScrollbar
+  measureSize
+  minBufferPx="200"
+  maxBufferPx="300"
+  (contentSizeChanged)="onContentSizeChanged($event)"
+  (measured)="onMeasured()"
+  (psYReachEnd)="isScrollReachBottom = true; resetRecentMessage()"
+  (psScrollUp)="isScrollReachBottom = false"
+>
+  <ng-template ucapVirtualScrollHeader>
+    <div class="ucap-chat-more-event" *ngIf="!!isRemainEvent">
       <button
         mat-button
         class="btn-more-pre bg-primary-chat"
@@ -28,31 +41,79 @@
         >{{ 'event.showPreviousEvents' | ucapI18n }}
       </button>
     </div>
-
+  </ng-template>
+  <div class="chat-area">
     <app-chat-message-box
-      *ngFor="let event of eventList"
+      *ucapVirtualFor="
+        let event of eventList;
+        keyOf: keyOf;
+        templateCacheSize: 0
+      "
       [message]="event"
       [roomInfo]="currentRoomInfo"
-      [isMe]="event.senderSeq + '' === String(user?.info?.seq) + ''"
+      [loginSession]="loginSession"
+      [loginInfo]="loginInfo"
+      [user]="user"
+      [userPermission]="userPermission"
+      [isMe]="String(user?.info?.seq) === String(event.senderSeq)"
       [translationSimpleview]="translationSimpleview"
       [senderInfo]="getSenderInfo(event.senderSeq)"
       [defaultProfileImage]="defaultProfileImage"
-      [profileImageRoot]="versionInfo2Res?.profileRoot"
+      [profileImageRoot]="versionInfo?.profileRoot"
       [dateChanged]="getDateSplitter(event)"
       [unreadCount]="getUnreadCount(event)"
       (messageContextMenu)="onClickMessageContextMenu($event)"
       (fileViewer)="onFileViewer($event)"
+      (fileSave)="onFileSave($event)"
       (massTranslationDetail)="onMassTranslationDetail($event)"
       (openProfile)="onOpenProfile($event)"
-    ></app-chat-message-box>
-
-    <div *ngIf="false" class="recent-receive-message">
-      <!-- 최근 메시지 영역 -->
-      <app-chat-recent-message
-        [senderInfo]="getSenderInfo(user?.info?.seq)"
+      (joinConference)="onJoinConference($event)"
+    >
+    </app-chat-message-box>
+    <!-- <app-chat-message-box
+        *ngFor="let event of eventList; trackBy: trackByEvent"
+        [message]="event"
+      ></app-chat-message-box> -->
+    <!-- <app-chat-message-box
+        *ngFor="let event of eventList; trackBy: trackByEvent"
+        [message]="event"
+        [roomInfo]="currentRoomInfo"
+        [loginInfo]="loginInfo"
+        [user]="user"
+        [loginSession]="loginSession"
+        [isMe]="String(user?.info?.seq) === String(event.senderSeq)"
+        [translationSimpleview]="translationSimpleview"
+        [senderInfo]="getSenderInfo(event.senderSeq)"
         [defaultProfileImage]="defaultProfileImage"
-        [profileImageRoot]="versionInfo2Res?.profileRoot"
+        [profileImageRoot]="versionInfo?.profileRoot"
+        [dateChanged]="getDateSplitter(event)"
+        [unreadCount]="getUnreadCount(event)"
+        (messageContextMenu)="onClickMessageContextMenu($event)"
+        (fileViewer)="onFileViewer($event)"
+        (massTranslationDetail)="onMassTranslationDetail($event)"
+        (openProfile)="onOpenProfile($event)"
+      ></app-chat-message-box> -->
+    <!-- <p *ngFor="let event of eventList; trackBy: trackByEvent">
+        {{ event.seq }} / {{ event.type }}
+      </p> -->
+    <!-- <div *ngIf="!!recentUserInfo" class="recent-receive-message">
+      <app-chat-recent-message
+        [senderInfo]="recentUserInfo"
+        [message]="recentMessage"
+        [defaultProfileImage]="defaultProfileImage"
+        [profileImageRoot]="versionInfo?.profileRoot"
+        (gotoBottom)="gotoScrollToBottom()"
       ></app-chat-recent-message>
-    </div>
+    </div> -->
   </div>
+</ucap-virtual-scroll-viewport>
+<div *ngIf="!!recentUserInfo" class="recent-receive-message">
+  <app-chat-recent-message
+    [senderInfo]="recentUserInfo"
+    [message]="recentMessage"
+    [defaultProfileImage]="defaultProfileImage"
+    [profileImageRoot]="versionInfo?.profileRoot"
+    (gotoBottom)="gotoScrollToBottom()"
+  ></app-chat-recent-message>
 </div>
+<!-- </div> -->
diff --git a/src/app/sections/chat/components/message.section.component.scss b/src/app/sections/chat/components/message.section.component.scss
index 876f9f5..5d71817 100644
--- a/src/app/sections/chat/components/message.section.component.scss
+++ b/src/app/sections/chat/components/message.section.component.scss
@@ -1,5 +1,30 @@
 @import '~@ucap/lg-scss/mixins';
 
+.icon-button-arrow {
+  @include ucapMatButton(36px, 36px, 6px, 36px);
+  border-color: $lipstick;
+  background-color: rgba(255, 255, 255, 0.5);
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  // position: sticky;
+  position: absolute;
+  right: 20px;
+  z-index: 5;
+  width: 36px;
+  // align-self: flex-end;
+  // margin-right: -10px;
+  &.top-position {
+    bottom: 90%;
+    order: 2;
+  }
+  &.bottom-position {
+    bottom: 30px;
+    order: 3;
+  }
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.8);
+  }
+}
+
 .ucap-message-section {
   display: flex;
   flex-direction: column;
@@ -11,54 +36,40 @@
     padding: 0 16px;
     min-width: 100%;
   }
-  .icon-button-arrow {
-    @include ucapMatButton(36px, 36px, 6px, 36px);
-    border-color: $lipstick;
-    background-color: rgba(255, 255, 255, 0.5);
-    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-    position: sticky;
-    z-index: 5;
-    width: 36px;
-    align-self: flex-end;
-    margin-right: -10px;
-    &.top-position {
-      bottom: 90%;
-      order: 2;
-    }
-    &.bottom-position {
-      bottom: 30px;
-      order: 3;
-    }
-    &:hover {
-      background-color: rgba(255, 255, 255, 0.8);
+
+  .ucap-chat-more-event {
+    padding: 20px 30px 0;
+    .btn-more-pre {
+      @include ucapMatButton(100%, 30px, 2px, 30px);
+      font-size: 0.857em;
+      @include screen(xs) {
+        padding: 0 16px;
+      }
     }
   }
 
   .chat-area {
     flex-grow: 1;
     order: 1;
-    padding-top: 30px;
+    padding: 0 30px;
     display: flex;
     flex-direction: column;
-    .ucap-chat-more-event {
-      padding: 20px 0 0;
-      .btn-more-pre {
-        @include ucapMatButton(100%, 30px, 2px, 30px);
-        font-size: 0.857em;
-      }
-    }
-    .recent-receive-message {
-      transition: all 0.4s;
-      position: sticky;
-      bottom: 0;
-      left: 0;
-      z-index: 5;
-      margin: 0 -30px;
-      background-color: rgba(0, 0, 0, 0.6);
-      color: #fff;
-      @include screen(xs) {
-        margin: 0 -15px;
-      }
+    @include screen(xs) {
+      padding: 0 16px;
     }
   }
 }
+.recent-receive-message {
+  transition: all 0.4s;
+  position: sticky;
+  bottom: 0;
+  left: 0;
+  z-index: 5;
+  margin: 0 -30px;
+  background-color: rgba(0, 0, 0, 0.6);
+  color: #fff;
+  width: 100%;
+  @include screen(xs) {
+    margin: 0 -15px;
+  }
+}
diff --git a/src/app/sections/chat/components/message.section.component.ts b/src/app/sections/chat/components/message.section.component.ts
index d838862..5eb0688 100644
--- a/src/app/sections/chat/components/message.section.component.ts
+++ b/src/app/sections/chat/components/message.section.component.ts
@@ -1,7 +1,23 @@
 import moment from 'moment';
 
-import { Subject, merge, combineLatest, Observable } from 'rxjs';
-import { takeUntil, take } from 'rxjs/operators';
+import {
+  Subject,
+  merge,
+  combineLatest,
+  Observable,
+  fromEvent,
+  interval
+} from 'rxjs';
+import {
+  takeUntil,
+  take,
+  tap,
+  withLatestFrom,
+  debounce,
+  debounceTime
+} from 'rxjs/operators';
+
+import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
 
 import {
   Component,
@@ -10,9 +26,9 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Input,
-  AfterViewInit,
   ViewChild,
-  ElementRef
+  ElementRef,
+  Inject
 } from '@angular/core';
 
 import { Store, select } from '@ngrx/store';
@@ -20,53 +36,72 @@ import { Dictionary } from '@ngrx/entity';
 
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 
-import { TransMassTalkDownloadRequest } from '@ucap/api-common';
-import { VersionInfo2Response } from '@ucap/api-public';
+import { DeviceType, FileDownloadItem } from '@ucap/domain-common';
+import { User } from '@ucap/domain-organization';
 import {
   Info,
   EventJson,
   EventType,
   FileType,
-  MassTranslationEventJson
-} from '@ucap/protocol-event';
-import {
+  MassTranslationEventJson,
+  FileEventJson,
   UserInfo as RoomUserInfo,
   UserInfoShort as RoomUserInfoShort,
   RoomInfo,
-  UpdateTimerSetRequest,
-  UpdateRequest,
-  RoomType
-} from '@ucap/protocol-room';
-import { LoginResponse } from '@ucap/protocol-authentication';
-import { FileInfo } from '@ucap/protocol-file';
-import { User } from '@ucap/protocol-info';
+  RoomType,
+  FileInfo
+} from '@ucap/domain-chat';
+
+import { TransMassTalkDownloadRequest } from '@ucap/api-common';
+
+import {
+  ReadRequest,
+  SSVC_TYPE_EVENT_SEND_NOTI,
+  SendNotification
+} from '@ucap/protocol-event';
+import { UpdateTimerSetRequest, UpdateRequest } from '@ucap/protocol-room';
+
+import { NativeService } from '@ucap/native';
 
 import { I18nService } from '@ucap/ng-i18n';
-
 import { UserSelector } from '@ucap/ng-store-organization';
 import {
   LoginSelector,
-  ConfigurationSelector
+  ConfigurationSelector,
+  AuthorizationSelector
 } from '@ucap/ng-store-authentication';
 import {
   ChattingSelector,
   RoomSelector,
   ChattingActions,
   RoomActions,
-  Chatting
+  ChatUtil
 } from '@ucap/ng-store-chat';
-
 import {
   ConfirmDialogComponent,
   ConfirmDialogData,
   ConfirmDialogResult,
-  ClipboardService,
-  SelectFileInfo
-} from '@ucap/ng-ui';
+  AlertDialogComponent,
+  AlertDialogData,
+  AlertDialogResult,
+  ClipboardService
+} from '@ucap/ng-ui/core';
+import { SelectFileInfo } from '@ucap/ng-ui/viewer';
+import {
+  VirtualScrollViewportComponent,
+  MeasureSizeVirtualScrollDirective
+} from '@ucap/ng-ui/scrolling';
+
+import { EventProtocolService } from '@ucap/ng-protocol-event';
+import { UCAP_NATIVE_SERVICE } from '@ucap/ng-native';
+import { LogService } from '@ucap/ng-logger';
 
 import { LoginSession } from '@app/models/login-session';
 import { AppChatService } from '@app/services/app-chat.service';
 import { AppAuthenticationService } from '@app/services/app-authentication.service';
+import { AppOrganizationService } from '@app/services/app-organization.service';
+import { AppFileService } from '@app/services/app-file.service';
+
 import {
   ProfileDialogComponent,
   ProfileDialogData,
@@ -78,16 +113,15 @@ import {
   ForwardDialogData,
   ForwardDialogResult
 } from '../dialogs/forward.dialog.component';
-import {
-  FileViewerDialogComponent,
-  FileViewerDialogData,
-  FileViewerDialogResult
-} from '../dialogs/file-viewer.dialog.component';
+import { FileViewerDialogData } from '../dialogs/file-viewer.dialog.component';
 import {
   SettingDialogComponent,
   SettingDialogData,
   SettingDialogResult
 } from '../dialogs/setting.dialog.component';
+import { ConferenceJoinRequest } from '@ucap/api-prompt';
+import { LoginInfo, VersionInfo } from '@ucap/domain-authentication';
+import { UserPermission } from '@ucap/domain-authorization';
 
 @Component({
   selector: 'app-sections-chat-message',
@@ -96,18 +130,19 @@ import {
 
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class MessageSectionComponent
-  implements OnInit, OnDestroy, AfterViewInit {
+export class MessageSectionComponent implements OnInit, OnDestroy {
   private roomIdSubject = new Subject<string>();
   private ngOnDestroySubject: Subject<void> = new Subject();
 
   @Input()
   set roomId(roomId: string) {
-    this._roomId = roomId;
+    if (this._roomId !== roomId) {
+      this._roomId = roomId;
 
-    this.roomIdSubject.next(roomId);
+      this.roomIdSubject.next(roomId);
 
-    this.initializeRoomData();
+      this.initializeRoomData();
+    }
   }
   get roomId(): string {
     return this._roomId;
@@ -121,13 +156,14 @@ export class MessageSectionComponent
   @Input()
   eventSendTrigger$: Observable<any>;
 
-  versionInfo2Res: VersionInfo2Response;
-  loginRes: LoginResponse;
+  versionInfo: VersionInfo;
+  loginInfo: LoginInfo;
   user: User;
   loginSession: LoginSession;
+  userPermission: UserPermission;
 
   currentRoomInfo: RoomInfo;
-  currentChatting: Chatting;
+  isRemainEvent = false;
   currentFileInfoList: FileInfo[] = [];
   roomUsers: RoomUserInfoShort[] = [];
   // eventList$: Observable<Info<EventJson>[]>;
@@ -137,6 +173,10 @@ export class MessageSectionComponent
   EventType = EventType;
   FileType = FileType;
 
+  /** 최근 메시지 */
+  recentMessage: Info<EventJson>;
+  recentUserInfo: RoomUserInfoShort | RoomUserInfo | undefined;
+
   /** Timer 대화방의 대화 삭제를 위한 interval */
   interval: any;
 
@@ -145,9 +185,25 @@ export class MessageSectionComponent
 
   /** About Scroll */
   isInitScrollbottom = true;
-  @ViewChild('chatMessagesContainer', { static: false })
+  isScrollReachBottom = false;
+  @ViewChild('chatMessagesContainer', { static: true })
   chatMessagesContainer: ElementRef<HTMLElement>;
 
+  @ViewChild('vsList', { static: false })
+  vsList: VirtualScrollViewportComponent;
+
+  @ViewChild('vsList', {
+    static: true,
+    read: MeasureSizeVirtualScrollDirective
+  })
+  measureSize: MeasureSizeVirtualScrollDirective;
+
+  @ViewChild(PerfectScrollbarDirective, {
+    static: true,
+    read: PerfectScrollbarDirective
+  })
+  psDirectiveRef: PerfectScrollbarDirective;
+
   String = String;
 
   constructor(
@@ -156,32 +212,109 @@ export class MessageSectionComponent
     private changeDetectorRef: ChangeDetectorRef,
     private dialog: MatDialog,
     private i18nService: I18nService,
-    private appAuthenticationService: AppAuthenticationService
+    private eventProtocolService: EventProtocolService,
+    private appAuthenticationService: AppAuthenticationService,
+    private appOrganizationService: AppOrganizationService,
+    private appFileService: AppFileService,
+    @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
+    private logService: LogService
   ) {
     this.defaultProfileImage = this.appChatService.defaultProfileImage;
+
+    // scroll handling when window size changing.
+    fromEvent(window, 'resize')
+      .pipe(takeUntil(this.ngOnDestroySubject), debounceTime(300))
+      .subscribe((event: any) => {
+        this.refreshAndScrollToBottom();
+      });
+
+    this.eventProtocolService.notification$
+      .pipe(
+        takeUntil(this.ngOnDestroySubject),
+        withLatestFrom(this.store.pipe(select(RoomSelector.rooms))),
+        tap(([notiOrRes, roomList]) => {
+          switch (notiOrRes.SSVC_TYPE) {
+            case SSVC_TYPE_EVENT_SEND_NOTI:
+              {
+                const noti = notiOrRes as SendNotification;
+                const roomId = noti.roomId;
+                const eventInfo = noti.info;
+                const trgtRoom = roomList.find(
+                  (roomInfo) => roomInfo.roomId === roomId
+                );
+
+                const contents = ChatUtil.convertFinalEventMessage(
+                  noti.eventType,
+                  noti.info.sentMessageJson
+                );
+
+                this.logService.debug(
+                  'Notification::eventProtocolService::SendNotification in message.section.components',
+                  noti
+                );
+
+                if (!!roomId && roomId === this.roomId) {
+                  if (!!this.isScrollReachBottom) {
+                    // Fires when I enter the event
+                    this.isInitScrollbottom = true;
+                  } else {
+                    this.recentMessage = noti.info;
+                    this.recentUserInfo = this.getSenderInfo(
+                      Number(noti.SENDER_SEQ)
+                    );
+                  }
+                }
+              }
+              break;
+            default:
+              // ignore..
+              break;
+          }
+        })
+      )
+      .subscribe();
   }
 
   ngOnInit(): void {
+    this.vsList
+      .elementScrolled()
+      .pipe(takeUntil(this.ngOnDestroySubject))
+      .subscribe(() => {
+        if (!!this.psDirectiveRef) {
+          this.psDirectiveRef.update();
+        }
+      });
+
     this.store
       .pipe(
         takeUntil(this.ngOnDestroySubject),
-        select(ConfigurationSelector.versionInfo2Response)
+        select(AuthorizationSelector.userPermission)
       )
-      .subscribe((versionInfo2Res) => (this.versionInfo2Res = versionInfo2Res));
-
-    this.store
-      .pipe(takeUntil(this.ngOnDestroySubject), select(LoginSelector.loginRes))
-      .subscribe((loginRes) => (this.loginRes = loginRes));
-
-    this.store
-      .pipe(takeUntil(this.ngOnDestroySubject), select(UserSelector.user))
-      .subscribe((user) => (this.user = user));
+      .subscribe((userPermission) => {
+        this.userPermission = userPermission;
+      });
 
     this.eventSendTrigger$
       .pipe(takeUntil(this.ngOnDestroySubject))
       .subscribe((_) => {
         // Fires when I enter the event
-        this.gotoScrollToBottom();
+        this.isInitScrollbottom = true;
+      });
+
+    this.nativeService
+      .window_onFocus$()
+      .pipe(takeUntil(this.ngOnDestroySubject))
+      .subscribe((isFocus) => {
+        if (!!this.roomId && !!this.eventList && this.eventList.length > 0) {
+          const roomId = this.roomId;
+          const lastReadSeq = this.eventList[this.eventList.length - 1].seq;
+          this.store.dispatch(
+            ChattingActions.read({
+              roomId,
+              lastReadSeq
+            } as ReadRequest)
+          );
+        }
       });
   }
 
@@ -202,35 +335,21 @@ export class MessageSectionComponent
     }
   }
 
-  ngAfterViewInit() {}
-
   initializeRoomData() {
     /** About initialize roomId */
     this.isInitScrollbottom = true;
+    this.onClickInvalidateCache();
 
     this.loginSession = this.appAuthenticationService.getLoginSession();
-
     this.store
-      .pipe(
-        takeUntil(merge(this.ngOnDestroySubject, this.roomIdSubject)),
-        select(RoomSelector.room, this.roomId)
-      )
-      .subscribe((room) => {
-        this.currentRoomInfo = room;
-
-        // About Interval
-        if (!!this.interval) {
-          clearInterval(this.interval);
-          this.interval = undefined;
-        }
-        if (!!this.currentRoomInfo && !!this.currentRoomInfo.isTimeRoom) {
-          this.interval = setInterval(() => {
-            this.store.dispatch(
-              ChattingActions.intervalClearEvent({ roomId: this.roomId })
-            );
-          }, 1000);
-        }
-      });
+      .pipe(take(1), select(ConfigurationSelector.versionInfo))
+      .subscribe((versionInfo) => (this.versionInfo = versionInfo));
+    this.store
+      .pipe(take(1), select(LoginSelector.loginInfo))
+      .subscribe((loginInfo) => (this.loginInfo = loginInfo));
+    this.store
+      .pipe(take(1), select(UserSelector.user))
+      .subscribe((user) => (this.user = user));
 
     this.store
       .pipe(
@@ -250,7 +369,12 @@ export class MessageSectionComponent
         select(ChattingSelector.chatting, this.roomId)
       )
       .subscribe((chatting) => {
-        this.currentChatting = chatting;
+        if (!!chatting && !!chatting.remainEvent) {
+          this.isRemainEvent = chatting.remainEvent;
+        } else {
+          this.isRemainEvent = false;
+        }
+
         if (
           !!chatting &&
           !!chatting.fileInfoList &&
@@ -285,12 +409,6 @@ export class MessageSectionComponent
       .subscribe((eventList) => {
         if (!!eventList && eventList.length > 0) {
           this.eventList = eventList;
-          this.changeDetectorRef.markForCheck();
-
-          if (!!this.isInitScrollbottom) {
-            this.gotoScrollToBottom();
-            this.isInitScrollbottom = false;
-          }
         }
       });
 
@@ -301,11 +419,46 @@ export class MessageSectionComponent
     ])
       .pipe(takeUntil(merge(this.ngOnDestroySubject, this.roomIdSubject)))
       .subscribe(([roomInfo, standbyRooms]) => {
+        // get room info.
+        if (!!roomInfo) {
+          if (
+            !!this.currentRoomInfo &&
+            this.currentRoomInfo.roomId === roomInfo.roomId
+          ) {
+            this.currentRoomInfo = {
+              ...this.currentRoomInfo,
+              roomName: roomInfo.roomName,
+              joinUserCount: roomInfo.joinUserCount,
+              isJoinRoom: roomInfo.isJoinRoom,
+              expiredFileStdSeq: roomInfo.expiredFileStdSeq,
+              timeRoomInterval: roomInfo.timeRoomInterval
+            };
+          } else {
+            // all refresh
+            this.currentRoomInfo = roomInfo;
+          }
+
+          // About Interval
+          if (!!this.interval) {
+            clearInterval(this.interval);
+            this.interval = undefined;
+          }
+          if (!!this.currentRoomInfo && !!this.currentRoomInfo.isTimeRoom) {
+            this.interval = setInterval(() => {
+              this.store.dispatch(
+                ChattingActions.intervalClearEvent({ roomId: this.roomId })
+              );
+            }, 1000);
+          }
+        }
+
+        // new room setting popup
         if (
           !!roomInfo &&
           roomInfo.roomId === this.roomId &&
           roomInfo.roomType !== RoomType.Mytalk &&
-          roomInfo.roomType !== RoomType.Single &&
+          (roomInfo.roomType !== RoomType.Single ||
+            (roomInfo.roomType === RoomType.Single && !!roomInfo.isTimeRoom)) &&
           !!standbyRooms &&
           standbyRooms.length > 0 &&
           standbyRooms.findIndex((roomId) => roomId === this.roomId) > -1
@@ -337,13 +490,57 @@ export class MessageSectionComponent
       });
   }
 
+  /** About scrolling */
+  keyOf = (item: Info<EventJson>): string | number => {
+    return item.seq;
+  };
+
+  onMeasured() {
+    if (!!this.isInitScrollbottom) {
+      this.gotoScrollToBottom();
+      this.isInitScrollbottom = false;
+    }
+  }
+
+  onContentSizeChanged(size: number) {
+    if (!!this.psDirectiveRef) {
+      this.psDirectiveRef.update();
+    }
+  }
+
+  onClickScrollTo(i: string) {
+    const index = Number(i);
+    // const offset = this.vsList.offsetForIndex(index, 'start');
+    // this.psDirectiveRef.scrollToY(offset);
+    // console.log('offset', offset, this.psDirectiveRef.ps().element.scrollTop);
+
+    this.vsList.scrollToIndex(index, 'center');
+  }
+
+  onClickInvalidateCache() {
+    if (!!this.measureSize) {
+      this.measureSize.invalidateMeasurements();
+    }
+  }
+
   gotoScrollToBottom() {
-    if (!!this.chatMessagesContainer) {
-      const self = this;
-      setTimeout(() => {
-        self.chatMessagesContainer.nativeElement.scrollTop =
-          self.chatMessagesContainer.nativeElement.scrollHeight;
-      }, 500);
+    // recent message reset;
+    this.resetRecentMessage();
+
+    // scrolling.
+    if (!!this.vsList && !!this.eventList && this.eventList.length > 0) {
+      this.vsList.scrollToIndex(this.eventList.length - 1, 'end');
+    }
+  }
+
+  refreshAndScrollToBottom() {
+    // if (!!this.vsList && !!this.isScrollReachBottom) {
+    //   this.isInitScrollbottom = false;
+    //   this.vsList.checkViewportSize();
+    // }
+    if (!!this.psDirectiveRef && !!this.isScrollReachBottom) {
+      this.psDirectiveRef.update();
+      this.psDirectiveRef.scrollToBottom();
     }
   }
 
@@ -353,7 +550,7 @@ export class MessageSectionComponent
   ): RoomUserInfoShort | RoomUserInfo | undefined {
     if (!!this.roomUsers && this.roomUsers.length) {
       return this.roomUsers.find(
-        (userInfo) => userInfo.seq + '' === senderSeq + ''
+        (userInfo) => String(senderSeq) === String(userInfo.seq)
       );
     }
 
@@ -366,8 +563,7 @@ export class MessageSectionComponent
 
     if (curIndex === 0) {
       return true;
-    }
-    if (curIndex > 0) {
+    } else if (curIndex > 0) {
       if (!this.eventList[curIndex]) {
         return false;
       }
@@ -376,16 +572,18 @@ export class MessageSectionComponent
         'day'
       );
     }
+
     return false;
   }
 
   /** Unread Count calculation */
   getUnreadCount(message: Info<EventJson>): string | number {
-    const unreadCnt = this.roomUsers
-      .filter(
-        (user) => user.isJoinRoom && user.seq + '' !== message.senderSeq + ''
-      )
-      .filter((user) => user.lastReadEventSeq < message.seq).length;
+    const unreadCnt = this.roomUsers.filter(
+      (user) =>
+        user.isJoinRoom &&
+        String(message.senderSeq) !== String(user.seq) &&
+        user.lastReadEventSeq < message.seq
+    ).length;
     return unreadCnt === 0 ? '' : unreadCnt;
   }
 
@@ -393,7 +591,7 @@ export class MessageSectionComponent
     event.preventDefault();
     event.stopPropagation();
 
-    if (!!this.currentChatting.remainEvent) {
+    if (!!this.isRemainEvent) {
       this.store.dispatch(
         ChattingActions.moreEvents({
           roomId: this.roomId
@@ -422,7 +620,7 @@ export class MessageSectionComponent
                 this.appChatService.massTextDownload({
                   userSeq: String(this.user.info.seq),
                   deviceType: this.loginSession.deviceType,
-                  token: this.loginRes.tokenString,
+                  token: this.loginInfo.tokenString,
                   eventMassSeq: params.message.seq
                 });
               }
@@ -525,7 +723,7 @@ export class MessageSectionComponent
         break;
       case 'FORWARD_TO_ME':
         {
-          if (this.loginRes.talkWithMeBotSeq > -1) {
+          if (this.loginInfo.talkWithMeBotSeq > -1) {
             const seqs = this.user.talkWithMeBotSeq as any;
             this.store.dispatch(
               ChattingActions.forward({
@@ -580,7 +778,7 @@ export class MessageSectionComponent
   }) {
     const req = {
       userSeq: String(this.user.info.seq),
-      token: this.loginRes.tokenString,
+      token: this.loginInfo.tokenString,
       deviceType: this.loginSession.deviceType,
       eventTransSeq: params.message.sentMessageJson.translationSeq.toString()
     } as TransMassTalkDownloadRequest;
@@ -592,16 +790,133 @@ export class MessageSectionComponent
     );
   }
 
-  onFileViewer(selectFileInfo: SelectFileInfo) {
-    const data: FileViewerDialogData = {
-      fileInfos: this.currentFileInfoList,
-      selectFileInfo,
-      downloadUrl: this.versionInfo2Res.downloadUrl,
-      deviceType: this.loginSession.deviceType,
-      token: this.loginRes.tokenString,
-      userSeq: String(this.user.info.seq)
-    };
-    this.appChatService.openFileviwer(data);
+  onFileViewer(params: {
+    selectFileInfo: SelectFileInfo;
+    senderInfo: RoomUserInfoShort | RoomUserInfo;
+  }) {
+    const self = this;
+    this.appOrganizationService
+      .getUserInfo({ userSeq: String(params.senderInfo.seq), user: this.user })
+      .then((result) => {
+        let isValid = false;
+        if (
+          !!result &&
+          !!result.userInfo &&
+          !!self.userPermission &&
+          self.userPermission.fileTransferAllowedCompanyList.indexOf(
+            result.userInfo.companyCode
+          ) > -1
+        ) {
+          isValid = true;
+        }
+
+        if (!!isValid) {
+          const data: FileViewerDialogData = {
+            fileInfos: self.currentFileInfoList,
+            selectFileInfo: params.selectFileInfo,
+            downloadUrl: self.versionInfo.downloadUrl,
+            deviceType: self.loginSession.deviceType,
+            token: self.loginInfo.tokenString,
+            userSeq: String(self.user.info.seq)
+          };
+          self.appChatService.openFileviwer(data);
+        } else {
+          self._openAlert(
+            self.i18nService.t('common:file.errors.disapprovalCompany')
+          );
+        }
+      })
+      .catch((reason) => {
+        self._openAlert(
+          self.i18nService.t('common:file.errors.disapprovalCompany')
+        );
+      });
+  }
+
+  onFileSave(params: {
+    fileInfo: FileEventJson;
+    fileDownloadItem: FileDownloadItem;
+    type: string;
+    senderInfo: RoomUserInfoShort | RoomUserInfo;
+  }): void {
+    const self = this;
+    this.appOrganizationService
+      .getUserInfo({ userSeq: String(params.senderInfo.seq), user: this.user })
+      .then((rst) => {
+        let isValid = false;
+        if (
+          !!rst &&
+          !!rst.userInfo &&
+          !!self.userPermission &&
+          self.userPermission.fileTransferAllowedCompanyList.indexOf(
+            rst.userInfo.companyCode
+          ) > -1
+        ) {
+          isValid = true;
+        }
+
+        if (!!isValid) {
+          if (
+            params.type === 'saveAs' &&
+            self.loginSession.deviceType === DeviceType.PC
+          ) {
+            self.nativeService
+              .file_selectForSave({ defaultPath: params.fileInfo.fileName })
+              .then((result) => {
+                if (!!result) {
+                  if (!!result.canceled) {
+                    // 취소함.
+                  } else {
+                    self.appFileService.saveFile(
+                      {
+                        fileInfo: params.fileInfo,
+                        fileDownloadItem: params.fileDownloadItem,
+                        type: params.type,
+                        fileName: params.fileInfo.fileName,
+                        fileDownloadUrl: undefined,
+                        savePath: result.filePath
+                      },
+                      self.loginInfo,
+                      self.user,
+                      self.loginSession
+                    );
+                  }
+                }
+              })
+              .catch((reason) => {
+                // self.snackBarService.open(
+                //   self.translateService.instant(
+                //     'common:file.errors.failToSpecifyPath'
+                //   ),
+                //   self.translateService.instant('common:file.errors.label')
+                // );
+              });
+          } else {
+            self.appFileService.saveFile(
+              {
+                fileInfo: params.fileInfo,
+                fileDownloadItem: params.fileDownloadItem,
+                type: params.type,
+                fileName: params.fileInfo.fileName,
+                fileDownloadUrl: undefined,
+                savePath: undefined
+              },
+              self.loginInfo,
+              self.user,
+              self.loginSession
+            );
+          }
+        } else {
+          self._openAlert(
+            self.i18nService.t('common:file.errors.disapprovalCompany')
+          );
+        }
+      })
+      .catch((reason) => {
+        self._openAlert(
+          self.i18nService.t('common:file.errors.disapprovalCompany')
+        );
+      });
   }
 
   private _standByRoomSetting(result: SettingDialogResult) {
@@ -640,4 +955,33 @@ export class MessageSectionComponent
       }
     });
   }
+
+  onJoinConference(conferenceSeq: number): void {
+    const loginSession = this.appAuthenticationService.getLoginSession();
+    const req: ConferenceJoinRequest = {
+      userSeq: String(this.user.info.seq),
+      deviceType: loginSession.deviceType,
+      tokenKey: this.loginInfo.tokenString,
+      conferenceSeq
+    };
+    this.appChatService.joinVideoConference(req);
+  }
+
+  private _openAlert(msg: string) {
+    this.dialog.open<AlertDialogComponent, AlertDialogData, AlertDialogResult>(
+      AlertDialogComponent,
+      {
+        panelClass: 'min-create-dialog',
+        data: {
+          title: this.i18nService.t('common:file.errors.title'),
+          message: msg
+        }
+      }
+    );
+  }
+
+  resetRecentMessage() {
+    this.recentMessage = undefined;
+    this.recentUserInfo = undefined;
+  }
 }
diff --git a/src/app/sections/chat/components/search.section.component.html b/src/app/sections/chat/components/search.section.component.html
index 292fe4d..cecd20c 100644
--- a/src/app/sections/chat/components/search.section.component.html
+++ b/src/app/sections/chat/components/search.section.component.html
@@ -12,9 +12,17 @@
           #searchWordInput
           type="text"
           formControlName="searchInput"
-          [matAutocomplete]="auto"
+          (keyup.backspace)="onKeyupBackspace($event)"
           (keydown.enter)="onKeyDownEnter($event, searchWordInput.value)"
         />
+        <!-- <input
+          matInput
+          #searchWordInput
+          type="text"
+          formControlName="searchInput"
+          [matAutocomplete]="auto"
+          (keydown.enter)="onKeyDownEnter($event, searchWordInput.value)"
+        /> -->
         <mat-autocomplete #auto="matAutocomplete">
           <mat-option
             *ngFor="let filteredRecommendedWord of filteredRecommendedWordList"
diff --git a/src/app/sections/chat/components/search.section.component.ts b/src/app/sections/chat/components/search.section.component.ts
index 6ae71b5..51a5613 100644
--- a/src/app/sections/chat/components/search.section.component.ts
+++ b/src/app/sections/chat/components/search.section.component.ts
@@ -9,7 +9,8 @@ import {
   EventEmitter,
   ChangeDetectorRef,
   ChangeDetectionStrategy,
-  ViewChild
+  ViewChild,
+  ElementRef
 } from '@angular/core';
 import { FormGroup, FormBuilder } from '@angular/forms';
 
@@ -17,7 +18,7 @@ import { Store, select } from '@ngrx/store';
 
 import { MatAutocompleteTrigger } from '@angular/material/autocomplete';
 
-import { User } from '@ucap/protocol-info';
+import { User } from '@ucap/domain-organization';
 
 import { LogService } from '@ucap/ng-logger';
 
@@ -45,6 +46,8 @@ export class SearchSectionComponent implements OnInit, OnDestroy {
   recommendedWordList: string[];
   filteredRecommendedWordList: string[];
 
+  @ViewChild('searchWordInput', { static: true })
+  searchWordInput: ElementRef<HTMLInputElement>;
   @ViewChild(MatAutocompleteTrigger) autocomplete: MatAutocompleteTrigger;
 
   private ngOnDestroySubject: Subject<void> = new Subject();
@@ -148,11 +151,20 @@ export class SearchSectionComponent implements OnInit, OnDestroy {
     }
   }
 
+  onKeyupBackspace(event: Event) {
+    if (this.searchWordInput.nativeElement.value === '') {
+      this.searchCancel.emit();
+    }
+    event.stopPropagation();
+  }
+
   onKeyDownEnter(event: KeyboardEvent, searchWord: string) {
     event.preventDefault();
     event.stopPropagation();
 
-    this.autocomplete.closePanel();
+    if (!!this.autocomplete) {
+      this.autocomplete.closePanel();
+    }
 
     this.keyDownEnter.emit({ searchWord });
   }
diff --git a/src/app/sections/chat/dialogs/create.dialog.component.html b/src/app/sections/chat/dialogs/create.dialog.component.html
index d8dd678..dbf8379 100644
--- a/src/app/sections/chat/dialogs/create.dialog.component.html
+++ b/src/app/sections/chat/dialogs/create.dialog.component.html
@@ -6,19 +6,19 @@
   >
     <div appLayoutsDefaultDialog="header">
       <span *ngIf="stepper.selectedIndex === 0">
-        {{ 'dialog.title.newChatRoom' | ucapI18n }}
+        {{ 'chat:dialog.title.newChatRoom' | ucapI18n }}
       </span>
       <span *ngIf="stepper.selectedIndex !== 0">
-        {{ (!!isTimer ? 'dialog.timerRoom' : 'dialog.normalRoom') | ucapI18n }}
+        {{ (!!isTimer ? 'chat:dialog.timerRoom' : 'chat:dialog.normalRoom') | ucapI18n }}
       </span>
-      <div appLayoutsDefaultDialog="sub-header" class="sub-header-tit">
+      <span appLayoutsDefaultDialog="sub-header" class="sub-header-tit">
         <span *ngIf="stepper.selectedIndex === 0">
-          {{ 'dialog.title.subSelectRoomType' | ucapI18n }}
+          {{ 'chat:dialog.title.subSelectRoomType' | ucapI18n }}
         </span>
         <span *ngIf="stepper.selectedIndex !== 0">
-          {{ 'dialog.title.subSelectUser' | ucapI18n }}
+          {{ 'chat:dialog.title.subSelectUser' | ucapI18n }}
         </span>
-      </div>
+      </span>
     </div>
 
     <div class="dialog-body" appLayoutsDefaultDialog="body">
@@ -31,12 +31,12 @@
         <mat-step label="Select room type" fxFlexFill>
           <div class="ucap-dialog-select-room-type">
             <div class="normal-room room-type">
-              <span class="title">{{ 'dialog.normalRoom' | ucapI18n }}</span>
+              <span class="title">{{ 'chat:dialog.normalRoom' | ucapI18n }}</span>
               <div class="img"></div>
               <div
                 class="description"
                 [innerHTML]="
-                  'dialog.normalRoomDescription'
+                  'chat:dialog.normalRoomDescription'
                     | ucapI18n: { maxCount: maxChatRoomUser }
                 "
               ></div>
@@ -69,12 +69,12 @@
             </div>
 
             <div class="room-type timer-room">
-              <span class="title">{{ 'dialog.timerRoom' | ucapI18n }}</span>
+              <span class="title">{{ 'chat:dialog.timerRoom' | ucapI18n }}</span>
               <div class="img"></div>
               <div
                 class="description"
                 [innerHTML]="
-                  'dialog.timerRoomDescription'
+                  'chat:dialog.timerRoomDescription'
                     | ucapI18n: { maxCount: maxChatRoomUser }
                 "
               ></div>
@@ -113,8 +113,9 @@
               [isDialog]="true"
               [checkable]="true"
               [selectedUserList]="selectedUserList"
-              (toggleCheckUser)="onChangeUserList($event)"
-              (toggleCheckGroup)="onChangeGroupList($event)"
+              [filteredTimerChatAuth]="isTimer"
+              (toggleCheckUser)="onToggleCheckUser($event)"
+              (toggleCheckGroup)="onToggleCheckGroup($event)"
             ></app-group-select-user>
           </div>
           <div class="ucap-dialog-organization-profile-selection">
@@ -130,7 +131,7 @@
                 class="selected-head-area"
               >
                 <p>
-                  {{ 'dialog.selectedUserList' | ucapI18n }}
+                  {{ 'chat:dialog.selectedUserList' | ucapI18n }}
                 </p>
                 <span
                   >(<em class="number">{{ selectedUserList?.length }}</em
@@ -144,7 +145,7 @@
     </div>
     <div appLayoutsDefaultDialog="action" class="btn-box">
       <button mat-button mat-stroked-button (click)="onCancel(stepper)">
-        {{ 'dialog.button.cancel' | ucapI18n }}
+        {{ 'chat:dialog.button.cancel' | ucapI18n }}
       </button>
       <button
         mat-flat-button
@@ -153,7 +154,7 @@
         [disabled]="this.isTimer === undefined"
         (click)="onConfirm(stepper)"
       >
-        {{ 'dialog.button.selectRoomUser' | ucapI18n }}
+        {{ 'chat:dialog.button.selectRoomUser' | ucapI18n }}
       </button>
       <button
         mat-flat-button
@@ -162,7 +163,7 @@
         [disabled]="selectedUserList.length === 0"
         (click)="onOpenRoom(stepper)"
       >
-        {{ 'dialog.button.openRoom' | ucapI18n }}
+        {{ 'chat:dialog.button.openRoom' | ucapI18n }}
       </button>
     </div>
   </app-layouts-default-dialog>
diff --git a/src/app/sections/chat/dialogs/create.dialog.component.scss b/src/app/sections/chat/dialogs/create.dialog.component.scss
index f2784fe..636a1cb 100644
--- a/src/app/sections/chat/dialogs/create.dialog.component.scss
+++ b/src/app/sections/chat/dialogs/create.dialog.component.scss
@@ -80,7 +80,7 @@
     flex-direction: column;
     align-items: center;
     width: 48%;
-    height: 210px;
+    height: 200px;
     border: 1px solid #999999;
     background-color: #f7f8fa;
     text-align: center;
@@ -98,7 +98,7 @@
         width: 60px;
         height: 60px;
         margin-bottom: 10px;
-        background-image: url(../../../../assets/images/ico/icon_normal_chat_g60.svg);
+        background-image: url(/assets/images/ico/icon_normal_chat_g60.svg);
       }
     }
     &.timer-room {
@@ -106,7 +106,7 @@
         width: 60px;
         height: 60px;
         margin-bottom: 10px;
-        background-image: url(../../../../assets/images/ico/icon_timer_chat_g60.svg);
+        background-image: url(/assets/images/ico/icon_timer_chat_g60.svg);
       }
     }
     .selecter {
diff --git a/src/app/sections/chat/dialogs/create.dialog.component.ts b/src/app/sections/chat/dialogs/create.dialog.component.ts
index 16d01b8..26ee51c 100644
--- a/src/app/sections/chat/dialogs/create.dialog.component.ts
+++ b/src/app/sections/chat/dialogs/create.dialog.component.ts
@@ -6,9 +6,7 @@ import {
   OnDestroy,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
-  Inject,
-  Input,
-  ViewChild
+  Inject
 } from '@angular/core';
 
 import {
@@ -17,32 +15,24 @@ import {
   MatDialog
 } from '@angular/material/dialog';
 
-import { UserInfo, GroupDetailData } from '@ucap/protocol-sync';
-import {
-  UserInfoSS,
-  UserInfoF,
-  UserInfoDN,
-  AuthResponse
-} from '@ucap/protocol-query';
-import { UserInfo as RoomUserInfo } from '@ucap/protocol-room';
+import { UserInfo, UserInfoSS } from '@ucap/domain-organization';
+import { GroupInfoDetail } from '@ucap/domain-group';
+
 import { MatStepper } from '@angular/material/stepper';
 import { I18nService } from '@ucap/ng-i18n';
 import {
   AlertDialogComponent,
   AlertDialogData,
   AlertDialogResult
-} from '@ucap/ng-ui';
+} from '@ucap/ng-ui/core';
 import { environment } from '@environments';
 import { Store, select } from '@ngrx/store';
 import { takeUntil } from 'rxjs/operators';
 import { AuthorizationSelector } from '@ucap/ng-store-authentication';
-
-export type UserInfoTypes =
-  | UserInfo
-  | UserInfoSS
-  | UserInfoF
-  | UserInfoDN
-  | RoomUserInfo;
+import { AppGroupService } from '@app/services/app-group.service';
+import { UserInfoTypes } from '@app/types';
+import { AppChatService } from '@app/services/app-chat.service';
+import { UserPermission } from '@ucap/domain-authorization';
 
 export interface CreateDialogData {}
 export interface CreateDialogResult {
@@ -62,7 +52,7 @@ export class CreateDialogComponent implements OnInit, OnDestroy {
 
   isTimer: boolean | undefined;
   selectedUserList: UserInfoTypes[] = [];
-  authRes: AuthResponse;
+  userPermission: UserPermission;
 
   private ngOnDestroySubject: Subject<void> = new Subject();
 
@@ -72,7 +62,9 @@ export class CreateDialogComponent implements OnInit, OnDestroy {
     private i18nService: I18nService,
     public dialog: MatDialog,
     private store: Store<any>,
-    private changeDetectorRef: ChangeDetectorRef
+    private changeDetectorRef: ChangeDetectorRef,
+    private appGroupService: AppGroupService,
+    private appChatService: AppChatService
   ) {
     this.maxChatRoomUser = environment.productConfig.chat.maxChatRoomUser;
   }
@@ -81,11 +73,11 @@ export class CreateDialogComponent implements OnInit, OnDestroy {
     this.store
       .pipe(
         takeUntil(this.ngOnDestroySubject),
-        select(AuthorizationSelector.authResponse)
+        select(AuthorizationSelector.userPermission)
       )
-      .subscribe((authRes) => {
-        this.authRes = authRes;
-        if (!!this.authRes && !this.authRes.canTimerChat) {
+      .subscribe((userPermission) => {
+        this.userPermission = userPermission;
+        if (!!this.userPermission && !this.userPermission.canTimerChat) {
           this.isTimer = false;
           this.currentStep = 1;
         }
@@ -103,7 +95,7 @@ export class CreateDialogComponent implements OnInit, OnDestroy {
     this.dialogRef.close();
   }
   onCancel(stepper: MatStepper) {
-    if (!!this.authRes && !this.authRes.canTimerChat) {
+    if (!!this.userPermission && !this.userPermission.canTimerChat) {
       // close.
     } else if (stepper.selectedIndex > 0) {
       stepper.previous();
@@ -135,93 +127,51 @@ export class CreateDialogComponent implements OnInit, OnDestroy {
 
     this.selectedUserList.map((user) => userSeqs.push(user.seq.toString()));
 
+    // validation and openRoom
+    this.appChatService.newOpenRoom(userSeqs, this.isTimer);
+
     if (this.selectedUserList.length >= this.maxChatRoomUser) {
-      this.dialog.open<
-        AlertDialogComponent,
-        AlertDialogData,
-        AlertDialogResult
-      >(AlertDialogComponent, {
-        panelClass: 'min-create-dialog',
-        data: {
-          title: this.i18nService.t('chat:errors.label'),
-          html: this.i18nService.t('chat:errors.maxCountOfRoomMemberWith', {
-            maxCount: this.maxChatRoomUser
-          })
-        }
-      });
+      // not close popup..
       return;
-    }
-
-    // Open Room.
-    this.dialogRef.close({ userSeqs, isTimer: this.isTimer });
-  }
-
-  onChangeUserList(datas: { checked: boolean; userInfo: UserInfoSS }[]) {
-    if (!datas || 0 === datas.length) {
-      return;
-    }
-
-    const pushs: UserInfoSS[] = [];
-    const pops: UserInfoSS[] = [];
-
-    datas.forEach((d) => {
-      const i = this.selectedUserList.findIndex(
-        (u) => String(u.seq) === String(d.userInfo.seq)
-      );
-      if (d.checked) {
-        if (-1 === i) {
-          pushs.push(d.userInfo);
-        }
-      } else {
-        if (-1 < i) {
-          pops.push(d.userInfo);
-        }
-      }
-    });
-
-    if (0 < pushs.length) {
-      this.selectedUserList = [...this.selectedUserList, ...pushs];
-    }
-
-    if (0 < pops.length) {
-      this.selectedUserList = this.selectedUserList.filter(
-        (u) => -1 === pops.findIndex((p) => String(p.seq) === String(u.seq))
-      );
-    }
-  }
-  onChangeGroupList(params: {
-    isChecked: boolean;
-    groupBuddyList: { group: GroupDetailData; buddyList: UserInfo[] };
-  }) {
-    if (params.isChecked) {
-      params.groupBuddyList.buddyList.forEach((item) => {
-        if (
-          this.selectedUserList.filter(
-            (user) => String(user.seq) === String(item.seq)
-          ).length === 0
-        ) {
-          this.selectedUserList = [...this.selectedUserList, item];
-        }
-      });
     } else {
-      this.selectedUserList = this.selectedUserList.filter(
-        (item) =>
-          params.groupBuddyList.buddyList.filter(
-            (del) => String(del.seq) === String(item.seq)
-          ).length === 0
-      );
+      this.dialogRef.close({ userSeqs, isTimer: this.isTimer });
     }
   }
-  onRemovedProfileSelection(userInfo: UserInfo) {
-    const i = this.selectedUserList.findIndex(
-      (u) => String(u.seq) === String(userInfo.seq)
+
+  onToggleCheckUser(datas: { checked: boolean; userInfo: UserInfoSS }[]) {
+    const resList = this.appGroupService.getToggleCheckUser(
+      datas,
+      this.selectedUserList
+    );
+    if (!resList) {
+      return;
+    }
+    this.selectedUserList = resList;
+  }
+  onToggleCheckGroup(params: {
+    isChecked: boolean;
+    groupBuddyList: { group: GroupInfoDetail; buddyList: UserInfo[] };
+  }) {
+    const resList = this.appGroupService.getToggleCheckGroup(
+      params,
+      this.selectedUserList
     );
 
-    if (-1 < i) {
-      this.selectedUserList = this.selectedUserList.filter(
-        (u) => String(u.seq) !== String(userInfo.seq)
-      );
+    if (!resList) {
+      return;
     }
+
+    this.selectedUserList = resList;
+  }
+  onRemovedProfileSelection(userInfo: UserInfo) {
+    const resUserList = this.appGroupService.removedProfileSelection(
+      userInfo,
+      this.selectedUserList
+    );
+
+    if (!resUserList) {
+    }
+    this.selectedUserList = resUserList;
   }
   removableForSelection = (userInfo: UserInfo) => {
     return true;
diff --git a/src/app/sections/chat/dialogs/file-viewer.dialog.component.ts b/src/app/sections/chat/dialogs/file-viewer.dialog.component.ts
index a2f0c8d..fb36035 100644
--- a/src/app/sections/chat/dialogs/file-viewer.dialog.component.ts
+++ b/src/app/sections/chat/dialogs/file-viewer.dialog.component.ts
@@ -7,23 +7,25 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 
 import { select, Store } from '@ngrx/store';
 
-import { DeviceType, LoginSession } from '@ucap/core';
-import { FileDownloadItem } from '@ucap/api';
-import { LoginResponse } from '@ucap/protocol-authentication';
-import { FileEventJson } from '@ucap/protocol-event';
-import { FileInfo, isMedia } from '@ucap/protocol-file';
-import { User } from '@ucap/protocol-info';
+import { DeviceType, FileDownloadItem } from '@ucap/domain-common';
+import { User } from '@ucap/domain-organization';
+import { LoginSession, LoginInfo } from '@ucap/domain-authentication';
+import { FileEventJson, FileInfo, isMedia } from '@ucap/domain-chat';
 
 import { LogService } from '@ucap/ng-logger';
 import { CommonApiService } from '@ucap/ng-api-common';
 
 import { UserSelector } from '@ucap/ng-store-organization';
-import { LoginSelector } from '@ucap/ng-store-authentication';
+import {
+  LoginSelector,
+  AuthorizationSelector
+} from '@ucap/ng-store-authentication';
 
-import { SelectFileInfo } from '@ucap/ng-ui';
+import { SelectFileInfo } from '@ucap/ng-ui/viewer';
 
 import { AppFileService } from '@app/services/app-file.service';
 import { AppAuthenticationService } from '@app/services/app-authentication.service';
+import { UserPermission } from '@ucap/domain-authorization';
 
 export interface FileViewerDialogData {
   fileInfos: FileInfo[];
@@ -51,9 +53,10 @@ export class FileViewerDialogComponent implements OnInit, OnDestroy {
   };
   currentFileInfo: FileInfo;
 
-  loginRes: LoginResponse;
+  loginInfo: LoginInfo;
   user: User;
   loginSession: LoginSession;
+  userPermission: UserPermission;
 
   constructor(
     private store: Store<any>,
@@ -96,14 +99,54 @@ export class FileViewerDialogComponent implements OnInit, OnDestroy {
 
   ngOnInit() {
     this.store
-      .pipe(takeUntil(this.ngOnDestroySubject), select(LoginSelector.loginRes))
-      .subscribe((loginRes) => (this.loginRes = loginRes));
+      .pipe(takeUntil(this.ngOnDestroySubject), select(LoginSelector.loginInfo))
+      .subscribe((loginInfo) => (this.loginInfo = loginInfo));
 
     this.store
       .pipe(takeUntil(this.ngOnDestroySubject), select(UserSelector.user))
       .subscribe((user) => (this.user = user));
 
     this.loginSession = this.appAuthenticationService.getLoginSession();
+
+    // auth.fileTransferAllowedCompanyList check.
+    this.store
+      .pipe(
+        takeUntil(this.ngOnDestroySubject),
+        select(AuthorizationSelector.userPermission)
+      )
+      .subscribe((userPermission) => {
+        if (!!userPermission) {
+          this.userPermission = userPermission;
+        }
+
+        if (
+          !!userPermission &&
+          !!this.data.fileInfos &&
+          this.data.fileInfos.length > 0
+        ) {
+          this.fileInfo = {
+            fileInfos: this.data.fileInfos
+              .filter((item) => {
+                // filtered userPermission.fileTransferAllowedCompanyList
+                if (
+                  !!userPermission.fileTransferAllowedCompanyList &&
+                  userPermission.fileTransferAllowedCompanyList.length > 0
+                ) {
+                  return (
+                    userPermission.fileTransferAllowedCompanyList.indexOf(
+                      item.sentMessageJson.companyCode
+                    ) > -1
+                  );
+                }
+                return true;
+              })
+              .sort((a, b) =>
+                a.eventSeq < b.eventSeq ? 1 : a.eventSeq > b.eventSeq ? -1 : 0
+              ),
+            selectFileInfo: this.data.selectFileInfo
+          };
+        }
+      });
   }
 
   ngOnDestroy(): void {
@@ -147,7 +190,7 @@ export class FileViewerDialogComponent implements OnInit, OnDestroy {
         fileDownloadUrl: undefined,
         savePath: undefined
       },
-      this.loginRes,
+      this.loginInfo,
       this.user,
       this.loginSession
     );
diff --git a/src/app/sections/chat/dialogs/forward.dialog.component.html b/src/app/sections/chat/dialogs/forward.dialog.component.html
index 5972860..7c41574 100644
--- a/src/app/sections/chat/dialogs/forward.dialog.component.html
+++ b/src/app/sections/chat/dialogs/forward.dialog.component.html
@@ -10,9 +10,14 @@
     <div class="dialog-body" appLayoutsDefaultDialog="body" fxFlexFill>
       <div class="ucap-dialog-app-group-select-user">
         <!-- search start-->
-        <div class="ucap-dialog-search">
+        <div
+          *ngIf="currentTabIndex === 0"
+          class="ucap-dialog-search"
+          [ngClass]="currentTabIndex === 0 ? 'ucap-dialog-search-disable' : ''"
+        >
           <app-organization-search-for-tenant
             placeholder="이름, 부서명, 전화번호, 이메일"
+            [isBackspaceCanceled]="isBackspaceCanceled"
             [(searchData)]="companySearchData"
             (canceled)="onCanceled()"
             class="select-user-section-search"
@@ -24,7 +29,7 @@
           <mat-tab-group
             mat-stretch-tabs
             class="tap-container tab_num2"
-            (selectedIndexChange)="onSelectedIndexChange($event)"
+            [(selectedIndex)]="currentTabIndex"
           >
             <!--[S]그룹-->
             <mat-tab>
@@ -57,6 +62,8 @@
                 <div fxFlexFill class="ucap-dialog-chat-tap">
                   <perfect-scrollbar style="width: 100%; height: 100%;">
                     <app-chat-room-list
+                      fxFlexFill
+                      [selectedRoom]="selectedRoom"
                       [checkable]="true"
                       (toggleRoom)="onToggleRoom($event)"
                     ></app-chat-room-list>
@@ -81,12 +88,13 @@
           <div class="search-result-list">
             <perfect-scrollbar style="width: 100%; height: 100%;">
               <app-group-profile-list
+                #appProfileList
                 [searchData]="companySearchData"
                 [selectedUser]="selectedUserList"
                 [checkable]="true"
                 [isDialog]="true"
                 (searched)="onSearched($event)"
-                (toggleCheck)="onToggleCheckUser($event)"
+                (toggleCheckUser)="onToggleCheckUser($event)"
                 class="ucap-dialog-search-result-container"
               ></app-group-profile-list>
             </perfect-scrollbar>
@@ -127,12 +135,7 @@
       <button
         mat-flat-button
         class="bg-primary-darkest"
-        [disabled]="
-          !(
-            !!selectedRoom ||
-            (!!selectedUserList && selectedUserList.length > 0)
-          )
-        "
+        [disabled]="checkDisableBtn()"
         (click)="onConfirm()"
       >
         {{ 'dialog.button.save' | ucapI18n }}
diff --git a/src/app/sections/chat/dialogs/forward.dialog.component.scss b/src/app/sections/chat/dialogs/forward.dialog.component.scss
index 0d19337..f0d6422 100644
--- a/src/app/sections/chat/dialogs/forward.dialog.component.scss
+++ b/src/app/sections/chat/dialogs/forward.dialog.component.scss
@@ -18,13 +18,16 @@
   }
 
   .forwrad-dialog-content {
-    height: calc(100% - 50px);
+    flex: 1 1 auto;
+    // height: calc(100% - 50px);
     .tap-container {
       height: 100%;
     }
   }
 
   .ucap-dialog-app-group-select-user {
+    display: flex;
+    flex-direction: column;
     flex: 1 0 auto;
     //width: 60%;
     height: 100%;
@@ -35,6 +38,9 @@
       height: 78%;
       margin-bottom: 2%;
     }
+    .ucap-dialog-search {
+      flex: 0 0 50px;
+    }
   }
   .ucap-dialog-organization-profile-selection {
     position: relative;
diff --git a/src/app/sections/chat/dialogs/forward.dialog.component.ts b/src/app/sections/chat/dialogs/forward.dialog.component.ts
index cb12cfb..0b8551b 100644
--- a/src/app/sections/chat/dialogs/forward.dialog.component.ts
+++ b/src/app/sections/chat/dialogs/forward.dialog.component.ts
@@ -19,10 +19,13 @@ import {
 
 import { Store, select } from '@ngrx/store';
 
-import { VersionInfo2Response } from '@ucap/api-public';
-import { UserInfo, GroupDetailData } from '@ucap/protocol-sync';
-import { UserInfoSS, UserInfoF, UserInfoDN } from '@ucap/protocol-query';
-import { UserInfo as RoomUserInfo, RoomInfo } from '@ucap/protocol-room';
+import {
+  UserInfo,
+  UserInfoSS,
+  UserInfoF,
+  UserInfoDN
+} from '@ucap/domain-organization';
+import { UserInfo as RoomUserInfo, RoomInfo } from '@ucap/domain-chat';
 
 import { I18nService } from '@ucap/ng-i18n';
 
@@ -33,18 +36,16 @@ import {
   AlertDialogComponent,
   AlertDialogData,
   AlertDialogResult
-} from '@ucap/ng-ui';
+} from '@ucap/ng-ui/core';
 
 import { SearchData } from '@app/ucap/organization/models/search-data';
 import { Expansion02Component as AppExpansion02Component } from '@app/ucap/group/components/expansion-02.component';
+import { ProfileListComponent as AppProfileListComponent } from '@app/ucap/group/components/profile-list.component';
 import { environment } from '@environments';
-
-export type UserInfoTypes =
-  | UserInfo
-  | UserInfoSS
-  | UserInfoF
-  | UserInfoDN
-  | RoomUserInfo;
+import { AppGroupService } from '@app/services/app-group.service';
+import { UserInfoTypes } from '@app/types';
+import { VersionInfo } from '@ucap/domain-authentication';
+import { GroupInfoDetail } from '@ucap/domain-group';
 
 export interface ForwardDialogData {}
 export interface ForwardDialogResult {
@@ -63,6 +64,9 @@ export class ForwardDialogComponent implements OnInit, OnDestroy {
   @ViewChild('appGroupExpansion', { static: false })
   appGroupExpansion: AppExpansion02Component;
 
+  @ViewChild('appProfileList', { static: false })
+  appProfileList: AppProfileListComponent;
+
   set companySearchData(searchData: SearchData) {
     if (!!searchData && searchData.searchWord !== '') {
       this._companySearchData = { ...searchData, bySearch: true };
@@ -85,13 +89,23 @@ export class ForwardDialogComponent implements OnInit, OnDestroy {
   selectedRoom: RoomInfo;
   selectedUserList: UserInfoTypes[] = [];
 
-  versionInfo2Res: VersionInfo2Response;
-
-  groupList: GroupDetailData[];
+  versionInfo: VersionInfo;
 
+  groupList: GroupInfoDetail[];
+  isBackspaceCanceled = true;
   isSearch = false;
   searchedList: UserInfoSS[] = [];
-  currentTabIndex: number;
+
+  set currentTabIndex(idx: number) {
+    this._currentTabIndex = idx;
+    // this._resetSelectedObject();
+  }
+
+  get currentTabIndex() {
+    return this._currentTabIndex;
+  }
+  // tslint:disable-next-line: variable-name
+  _currentTabIndex: number;
 
   constructor(
     public dialogRef: MatDialogRef<ForwardDialogData, ForwardDialogResult>,
@@ -99,7 +113,8 @@ export class ForwardDialogComponent implements OnInit, OnDestroy {
     private store: Store<any>,
     private i18nService: I18nService,
     public dialog: MatDialog,
-    private changeDetectorRef: ChangeDetectorRef
+    private changeDetectorRef: ChangeDetectorRef,
+    private appGroupService: AppGroupService
   ) {
     this.maxChatRoomUser = environment.productConfig.chat.maxChatRoomUser;
   }
@@ -108,10 +123,10 @@ export class ForwardDialogComponent implements OnInit, OnDestroy {
     this.store
       .pipe(
         takeUntil(this.ngOnDestroySubject),
-        select(ConfigurationSelector.versionInfo2Response)
+        select(ConfigurationSelector.versionInfo)
       )
-      .subscribe((versionInfo2Res) => {
-        this.versionInfo2Res = versionInfo2Res;
+      .subscribe((versionInfo) => {
+        this.versionInfo = versionInfo;
       });
 
     this.store
@@ -119,6 +134,7 @@ export class ForwardDialogComponent implements OnInit, OnDestroy {
       .subscribe((groups) => {
         this.groupList = groups;
       });
+    this.currentTabIndex = 0;
   }
 
   ngOnDestroy(): void {
@@ -147,68 +163,49 @@ export class ForwardDialogComponent implements OnInit, OnDestroy {
 
   onSearched(searchedUserInfos: UserInfoSS[]): void {
     this.searchedList = searchedUserInfos;
+
+    if (!!this.appProfileList) {
+      this.appProfileList.psUpdate();
+    }
   }
 
   onToggleCheckUser(datas: { checked: boolean; userInfo: UserInfoSS }[]) {
-    if (!datas || 0 === datas.length) {
+    const resList = this.appGroupService.getToggleCheckUser(
+      datas,
+      this.selectedUserList
+    );
+
+    if (!resList) {
       return;
     }
-
-    const pushs: UserInfoSS[] = [];
-    const pops: UserInfoSS[] = [];
-
-    datas.forEach((d) => {
-      const i = this.selectedUserList.findIndex(
-        (u) => u.seq === d.userInfo.seq
-      );
-      if (d.checked) {
-        if (-1 === i) {
-          pushs.push(d.userInfo);
-        }
-      } else {
-        if (-1 < i) {
-          pops.push(d.userInfo);
-        }
-      }
-    });
-
-    if (0 < pushs.length) {
-      this.selectedUserList = [...this.selectedUserList, ...pushs];
-    }
-
-    if (0 < pops.length) {
-      this.selectedUserList = this.selectedUserList.filter(
-        (u) => -1 === pops.findIndex((p) => p.seq === u.seq)
-      );
-    }
+    this.selectedUserList = resList;
   }
 
   onToggleCheckGroup(params: {
     isChecked: boolean;
-    groupBuddyList: { group: GroupDetailData; buddyList: UserInfo[] };
+    groupBuddyList: { group: GroupInfoDetail; buddyList: UserInfo[] };
   }) {
-    if (params.isChecked) {
-      params.groupBuddyList.buddyList.forEach((item) => {
-        if (
-          this.selectedUserList.filter((user) => user.seq === item.seq)
-            .length === 0
-        ) {
-          this.selectedUserList = [...this.selectedUserList, item];
-        }
-      });
-    } else {
-      this.selectedUserList = this.selectedUserList.filter(
-        (item) =>
-          params.groupBuddyList.buddyList.filter((del) => del.seq === item.seq)
-            .length === 0
-      );
+    const resList = this.appGroupService.getToggleCheckGroup(
+      params,
+      this.selectedUserList
+    );
+
+    if (!resList) {
+      return;
     }
+    this.selectedUserList = resList;
   }
 
   onCancel() {
     this.dialogRef.close({ choice: false });
   }
   onConfirm() {
+    if (this.currentTabIndex === 0) {
+      this.selectedRoom = undefined;
+    } else {
+      this.selectedUserList = [];
+    }
+
     if (
       !this.selectedRoom &&
       !!this.selectedUserList &&
@@ -238,58 +235,8 @@ export class ForwardDialogComponent implements OnInit, OnDestroy {
   onToggleRoom(roomInfo: RoomInfo): void {
     if (!!roomInfo) {
       this.selectedRoom = roomInfo;
-    }
-  }
-
-  getCheckedByRoomInfo(roomInfo: RoomInfo): boolean {
-    if (
-      !!this.selectedRoom &&
-      this.selectedRoom.roomId.localeCompare(roomInfo.roomId) === 0
-    ) {
-      return true;
-    }
-
-    return false;
-  }
-  onChangeUserList(data: { checked: boolean; userInfo: UserInfoSS }) {
-    const i = this.selectedUserList.findIndex(
-      (u) => String(u.seq) === String(data.userInfo.seq)
-    );
-
-    if (data.checked) {
-      if (-1 === i) {
-        this.selectedUserList = [...this.selectedUserList, data.userInfo];
-      }
     } else {
-      if (-1 < i) {
-        this.selectedUserList = this.selectedUserList.filter(
-          (u) => String(u.seq) !== String(data.userInfo.seq)
-        );
-      }
-    }
-  }
-
-  onChangeGroupList(params: {
-    isChecked: boolean;
-    groupBuddyList: { group: GroupDetailData; buddyList: UserInfo[] };
-  }) {
-    if (params.isChecked) {
-      params.groupBuddyList.buddyList.forEach((item) => {
-        if (
-          this.selectedUserList.filter(
-            (user) => String(user.seq) === String(item.seq)
-          ).length === 0
-        ) {
-          this.selectedUserList = [...this.selectedUserList, item];
-        }
-      });
-    } else {
-      this.selectedUserList = this.selectedUserList.filter(
-        (item) =>
-          params.groupBuddyList.buddyList.filter(
-            (del) => String(del.seq) === String(item.seq)
-          ).length === 0
-      );
+      this.selectedRoom = undefined;
     }
   }
 
@@ -321,31 +268,62 @@ export class ForwardDialogComponent implements OnInit, OnDestroy {
   }
 
   onToggleSearchAllItem(value: boolean): void {
+    const pushs: UserInfoSS[] = [];
+    const pops: UserInfoSS[] = [];
+
+    this.searchedList.forEach((user) => {
+      const i = this.selectedUserList.findIndex((u) => u.seq === user.seq);
+
+      if (-1 === i) {
+        pushs.push(user);
+      }
+
+      if (-1 < i) {
+        pops.push(user);
+      }
+    });
+
     if (!!value) {
-      const targetRoomList = this.searchedList;
-      this.selectedUserList = targetRoomList.slice();
+      if (0 < pushs.length) {
+        this.selectedUserList = [...this.selectedUserList, ...pushs];
+      }
     } else {
-      this.selectedUserList = [];
+      if (0 < pops.length) {
+        this.selectedUserList = this.selectedUserList.filter(
+          (u) => -1 === pops.findIndex((p) => p.seq === u.seq)
+        );
+      }
     }
     this.changeDetectorRef.markForCheck();
   }
 
   onCanceled() {
     this.isSearch = false;
-    this.searchedList = [];
+
     this.companySearchData = { ...this.companySearchData, searchWord: '' };
   }
 
+  checkDisableBtn(): boolean {
+    if (
+      this.currentTabIndex === 0 &&
+      !!this.selectedUserList &&
+      this.selectedUserList.length > 0
+    ) {
+      return false;
+    } else if (this.currentTabIndex === 1 && !!this.selectedRoom) {
+      return false;
+    }
+    return true;
+  }
   onRemovedProfileSelection(userInfo: UserInfo) {
-    const i = this.selectedUserList.findIndex(
-      (u) => String(u.seq) === String(userInfo.seq)
+    const resUserList = this.appGroupService.removedProfileSelection(
+      userInfo,
+      this.selectedUserList
     );
 
-    if (-1 < i) {
-      this.selectedUserList = this.selectedUserList.filter(
-        (u) => String(u.seq) !== String(userInfo.seq)
-      );
+    if (!resUserList) {
     }
+    this.selectedUserList = resUserList;
   }
   removableForSelection = (userInfo: UserInfo) => {
     return true;
diff --git a/src/app/sections/chat/dialogs/setting.dialog.component.ts b/src/app/sections/chat/dialogs/setting.dialog.component.ts
index b89e969..1da8368 100644
--- a/src/app/sections/chat/dialogs/setting.dialog.component.ts
+++ b/src/app/sections/chat/dialogs/setting.dialog.component.ts
@@ -1,4 +1,5 @@
 import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 import {
   Component,
@@ -9,6 +10,8 @@ import {
   Inject
 } from '@angular/core';
 
+import { Store, select } from '@ngrx/store';
+
 import {
   MatDialogRef,
   MAT_DIALOG_DATA,
@@ -16,11 +19,9 @@ import {
   MatDialogConfig
 } from '@angular/material/dialog';
 
-import { I18nService } from '@ucap/ng-i18n';
+import { RoomInfo } from '@ucap/domain-chat';
 
-import { Store, select } from '@ngrx/store';
-import { takeUntil } from 'rxjs/operators';
-import { RoomInfo } from '@ucap/protocol-room';
+import { I18nService } from '@ucap/ng-i18n';
 import { RoomSelector } from '@ucap/ng-store-chat';
 
 export interface SettingDialogData {
diff --git a/src/app/sections/chat/dialogs/text-detail.dialog.component.html b/src/app/sections/chat/dialogs/text-detail.dialog.component.html
index 8789f53..d8cb4af 100644
--- a/src/app/sections/chat/dialogs/text-detail.dialog.component.html
+++ b/src/app/sections/chat/dialogs/text-detail.dialog.component.html
@@ -12,7 +12,7 @@
         <div class="profile-image">
           <img
             ucapImage
-            [base]="versionInfo2Res?.profileRoot"
+            [base]="versionInfo?.profileRoot"
             [path]="userInfo.profileImageFile"
             [default]="defaultProfileImage"
           />
@@ -32,7 +32,7 @@
         </div>
       </div>
       <div class="contents">
-        <perfect-scrollbar
+        <perfect-scrollbar #perfectScroll
           ><div
             [innerHTML]="
               contents | ucapSafeHtml | ucapLinefeedToHtml | ucapLinky
diff --git a/src/app/sections/chat/dialogs/text-detail.dialog.component.ts b/src/app/sections/chat/dialogs/text-detail.dialog.component.ts
index c62546f..baf3c79 100644
--- a/src/app/sections/chat/dialogs/text-detail.dialog.component.ts
+++ b/src/app/sections/chat/dialogs/text-detail.dialog.component.ts
@@ -5,7 +5,9 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Inject,
-  ElementRef
+  ElementRef,
+  ViewChild,
+  AfterViewInit
 } from '@angular/core';
 
 import { Subject, of, combineLatest } from 'rxjs';
@@ -18,16 +20,18 @@ import {
   MatDialog
 } from '@angular/material/dialog';
 
-import { DeviceType } from '@ucap/core';
-import { StatusCode } from '@ucap/api';
-import { NativeService } from '@ucap/native';
-import { VersionInfo2Response } from '@ucap/api-public';
-import { MassTalkDownloadRequest } from '@ucap/api-common';
+import { DeviceType } from '@ucap/domain-common';
 import {
   UserInfo as RoomUserInfo,
-  UserInfoShort as RoomUserInfoShort
-} from '@ucap/protocol-room';
-import { Info, EventJson } from '@ucap/protocol-event';
+  UserInfoShort as RoomUserInfoShort,
+  Info,
+  EventJson
+} from '@ucap/domain-chat';
+
+import { StatusCode } from '@ucap/api';
+import { NativeService } from '@ucap/native';
+
+import { MassTalkDownloadRequest } from '@ucap/api-common';
 
 import { CommonApiService } from '@ucap/ng-api-common';
 import { LogService } from '@ucap/ng-logger';
@@ -36,6 +40,8 @@ import { RoomSelector } from '@ucap/ng-store-chat';
 import { ConfigurationSelector } from '@ucap/ng-store-authentication';
 
 import { AppChatService } from '@app/services/app-chat.service';
+import { PerfectScrollbarComponent } from 'ngx-perfect-scrollbar';
+import { VersionInfo } from '@ucap/domain-authentication';
 
 export type UserInfoTypes = RoomUserInfo | RoomUserInfoShort;
 
@@ -55,13 +61,15 @@ export interface TextDetailDialogResult {}
   styleUrls: ['./text-detail.dialog.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class TextDetailDialogComponent implements OnInit, OnDestroy {
+export class TextDetailDialogComponent
+  implements OnInit, OnDestroy, AfterViewInit {
   userInfo: UserInfoTypes;
-  contents: string;
+  contents = '';
 
   defaultProfileImage: string;
-  versionInfo2Res: VersionInfo2Response;
+  versionInfo: VersionInfo;
 
+  @ViewChild('perfectScroll') perfectScroll: PerfectScrollbarComponent;
   private ngOnDestroySubject: Subject<void> = new Subject();
 
   constructor(
@@ -85,10 +93,10 @@ export class TextDetailDialogComponent implements OnInit, OnDestroy {
     this.store
       .pipe(
         takeUntil(this.ngOnDestroySubject),
-        select(ConfigurationSelector.versionInfo2Response)
+        select(ConfigurationSelector.versionInfo)
       )
-      .subscribe((versionInfo2Res) => {
-        this.versionInfo2Res = versionInfo2Res;
+      .subscribe((versionInfo) => {
+        this.versionInfo = versionInfo;
       });
 
     this.commonApiService
@@ -107,6 +115,7 @@ export class TextDetailDialogComponent implements OnInit, OnDestroy {
             this.changeDetectorRef.markForCheck();
 
             setTimeout(() => {
+              this.psUpdate();
               if (
                 !!this.elementRef.nativeElement &&
                 !!this.elementRef.nativeElement.querySelector('a')
@@ -154,6 +163,16 @@ export class TextDetailDialogComponent implements OnInit, OnDestroy {
     }
   }
 
+  ngAfterViewInit(): void {
+    this.psUpdate();
+  }
+
+  psUpdate() {
+    if (!!this.perfectScroll) {
+      this.perfectScroll.directiveRef.update();
+    }
+  }
+
   onClickEvent(event: MouseEvent) {
     this.nativeService.platform_openDefaultBrowser(
       (event.target as HTMLAnchorElement).text
diff --git a/src/app/sections/chat/dialogs/trans-detail.dialog.component.html b/src/app/sections/chat/dialogs/trans-detail.dialog.component.html
index 8dccc5a..265f139 100644
--- a/src/app/sections/chat/dialogs/trans-detail.dialog.component.html
+++ b/src/app/sections/chat/dialogs/trans-detail.dialog.component.html
@@ -12,7 +12,7 @@
         <div class="profile-image">
           <img
             ucapImage
-            [base]="versionInfo2Res?.profileRoot"
+            [base]="versionInfo?.profileRoot"
             [path]="userInfo.profileImageFile"
             [default]="defaultProfileImage"
           />
diff --git a/src/app/sections/chat/dialogs/trans-detail.dialog.component.ts b/src/app/sections/chat/dialogs/trans-detail.dialog.component.ts
index a53cf82..5ef118c 100644
--- a/src/app/sections/chat/dialogs/trans-detail.dialog.component.ts
+++ b/src/app/sections/chat/dialogs/trans-detail.dialog.component.ts
@@ -1,3 +1,6 @@
+import { Subject, of, combineLatest } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
 import {
   Component,
   OnInit,
@@ -9,7 +12,7 @@ import {
   AfterViewInit
 } from '@angular/core';
 
-import { Subject, of, combineLatest } from 'rxjs';
+import { Store, select } from '@ngrx/store';
 
 import {
   MatDialogRef,
@@ -17,21 +20,21 @@ import {
   MatDialog
 } from '@angular/material/dialog';
 
-import { NativeService } from '@ucap/native';
-import { VersionInfo2Response } from '@ucap/api-public';
-
 import {
   UserInfo as RoomUserInfo,
-  UserInfoShort as RoomUserInfoShort
-} from '@ucap/protocol-room';
+  UserInfoShort as RoomUserInfoShort,
+  Info,
+  MassTranslationEventJson
+} from '@ucap/domain-chat';
+
+import { NativeService } from '@ucap/native';
 
 import { LogService } from '@ucap/ng-logger';
 import { UCAP_NATIVE_SERVICE } from '@ucap/ng-native';
-import { Store, select } from '@ngrx/store';
-import { takeUntil } from 'rxjs/operators';
+
 import { ConfigurationSelector } from '@ucap/ng-store-authentication';
 import { RoomSelector } from '@ucap/ng-store-chat';
-import { Info, MassTranslationEventJson } from '@ucap/protocol-event';
+import { VersionInfo } from '@ucap/domain-authentication';
 
 export type UserInfoTypes = RoomUserInfo | RoomUserInfoShort;
 
@@ -55,7 +58,7 @@ export class TransDetailDialogComponent
   contents: string;
 
   defaultProfileImage: string;
-  versionInfo2Res: VersionInfo2Response;
+  versionInfo: VersionInfo;
 
   private ngOnDestroySubject: Subject<void> = new Subject();
 
@@ -78,10 +81,10 @@ export class TransDetailDialogComponent
     this.store
       .pipe(
         takeUntil(this.ngOnDestroySubject),
-        select(ConfigurationSelector.versionInfo2Response)
+        select(ConfigurationSelector.versionInfo)
       )
-      .subscribe((versionInfo2Res) => {
-        this.versionInfo2Res = versionInfo2Res;
+      .subscribe((versionInfo) => {
+        this.versionInfo = versionInfo;
       });
     combineLatest([
       this.store.pipe(select(RoomSelector.roomUser, this.data.roomId)),
diff --git a/src/app/sections/chat/directives/file-upload-for.directive.ts b/src/app/sections/chat/directives/file-upload-for.directive.ts
new file mode 100644
index 0000000..baf5e80
--- /dev/null
+++ b/src/app/sections/chat/directives/file-upload-for.directive.ts
@@ -0,0 +1,179 @@
+import { Subject, fromEvent } from 'rxjs';
+
+import {
+  Directive,
+  ElementRef,
+  EventEmitter,
+  HostListener,
+  Output,
+  Input,
+  AfterViewInit,
+  NgZone,
+  OnDestroy,
+  OnInit
+} from '@angular/core';
+
+import { FileUploadItem } from '@ucap/domain-common';
+
+import { FileUploadQueueComponent } from '@ucap/ng-ui/file-upload';
+import { takeUntil } from 'rxjs/operators';
+
+@Directive({
+  selector: 'input[ucapFileUploadFor01], div[ucapFileUploadFor01]'
+})
+export class FileUploadForDirective
+  implements OnInit, OnDestroy, AfterViewInit {
+  @Input()
+  fileUploadQueue?: FileUploadQueueComponent;
+
+  @Input()
+  validator?: (fileList: FileList) => Promise<boolean>;
+
+  @Output()
+  public fileDragEnter = new EventEmitter<DataTransferItemList>();
+
+  @Output()
+  public fileDragOver = new EventEmitter<void>();
+
+  @Output()
+  public fileDragLeave = new EventEmitter<void>();
+
+  @Output()
+  public fileSelected = new EventEmitter<FileUploadItem[] | FileList>();
+
+  dragOver = false;
+
+  private ngOnDestroySubject: Subject<void> = new Subject();
+
+  constructor(
+    private elementRef: ElementRef,
+    private readonly ngZone: NgZone
+  ) {}
+
+  ngOnInit(): void {
+    fromEvent(window, 'dragenter')
+      .pipe(takeUntil(this.ngOnDestroySubject))
+      .subscribe((event: DragEvent) => {
+        if (!this.isFileDrag(event.dataTransfer)) {
+          return;
+        }
+
+        if (!this.dragOver) {
+          this.fileDragEnter.emit(event.dataTransfer.items);
+          this.dragOver = true;
+          if (!!this.fileUploadQueue) {
+            this.fileUploadQueue.onDragEnter(event.dataTransfer.items);
+          }
+        }
+      });
+
+    fromEvent(window, 'dragover')
+      .pipe(takeUntil(this.ngOnDestroySubject))
+      .subscribe((event: DragEvent) => {
+        if (!this.isFileDrag(event.dataTransfer)) {
+          return;
+        }
+        // if (this.fileUploadQueue.isEventInElement(event)) {
+        //   event.dataTransfer.dropEffect = 'copy';
+        // } else {
+        //   event.dataTransfer.dropEffect = 'none';
+        // }
+        event.preventDefault();
+      });
+
+    fromEvent(window, 'dragleave')
+      .pipe(takeUntil(this.ngOnDestroySubject))
+      .subscribe((event: DragEvent) => {
+        if (!this.isFileDrag(event.dataTransfer)) {
+          return;
+        }
+
+        if (event && event.pageX === 0 && event.pageY === 0) {
+          this.fileDragLeave.emit();
+          this.dragOver = false;
+          if (!!this.fileUploadQueue) {
+            this.fileUploadQueue.onDragLeave();
+          }
+        }
+      });
+
+    fromEvent(window, 'drop')
+      .pipe(takeUntil(this.ngOnDestroySubject))
+      .subscribe((event: any) => {
+        if (!this.isFileDrag(event.dataTransfer)) {
+          return;
+        }
+
+        const self = this;
+        const files: FileList = event.dataTransfer.files;
+
+        event.preventDefault();
+        event.stopPropagation();
+        this.elementRef.nativeElement.value = ''; // Case defined directive in 'input' type.
+        this.dragOver = false;
+
+        if (!!this.validator) {
+          this.validator(files)
+            .then(async (result) => {
+              if (!result) {
+                if (!!this.fileUploadQueue) {
+                  this.fileUploadQueue.onUploadComplete();
+                }
+                return;
+              } else {
+                const fileUploadItems = FileUploadItem.fromFiles(files);
+                self.fileSelected.emit(fileUploadItems);
+
+                if (!!self.fileUploadQueue) {
+                  self.fileUploadQueue.onDrop(fileUploadItems);
+                }
+              }
+            })
+            .catch((err) => {
+              if (!!this.fileUploadQueue) {
+                this.fileUploadQueue.onUploadComplete();
+              }
+            });
+        } else {
+          const fileUploadItems = FileUploadItem.fromFiles(files);
+          this.fileSelected.emit(files);
+
+          if (!!this.fileUploadQueue) {
+            this.fileUploadQueue.onDrop(fileUploadItems);
+          }
+        }
+      });
+  }
+
+  ngOnDestroy(): void {
+    if (!!this.ngOnDestroySubject) {
+      this.ngOnDestroySubject.next();
+      this.ngOnDestroySubject.complete();
+    }
+  }
+
+  ngAfterViewInit(): void {}
+
+  // @HostListener('change')
+  // public onChange(): any {
+  //   const files = this.elementRef.nativeElement.files;
+  //   this.fileSelected.emit(FileUploadItem.fromFiles(files));
+  //   this.elementRef.nativeElement.value = '';
+  // }
+
+  private isFileDrag(dataTransfer: DataTransfer): boolean {
+    if (0 >= dataTransfer.items.length) {
+      return false;
+    }
+
+    // tslint:disable-next-line: prefer-for-of
+    for (let i = 0; i < dataTransfer.items.length; i++) {
+      const element = dataTransfer.items[i];
+      if ('file' !== element.kind) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+}
diff --git a/src/app/sections/chat/directives/index.ts b/src/app/sections/chat/directives/index.ts
new file mode 100644
index 0000000..4236382
--- /dev/null
+++ b/src/app/sections/chat/directives/index.ts
@@ -0,0 +1,3 @@
+import { FileUploadForDirective } from './file-upload-for.directive';
+
+export const DIRECTIVES = [FileUploadForDirective];
diff --git a/src/app/sections/chat/drawers/add-group.drawer.component.html b/src/app/sections/chat/drawers/add-group.drawer.component.html
index e8a9c92..16c68f6 100644
--- a/src/app/sections/chat/drawers/add-group.drawer.component.html
+++ b/src/app/sections/chat/drawers/add-group.drawer.component.html
@@ -23,7 +23,7 @@
           [checkable]="true"
           [searchable]="false"
           [selectedGroupList]="selectedGroupList"
-          (changeGroupList)="onChangeSelectedGroupList($event)"
+          (toggleCheckGroup)="onChangeSelectedGroupList($event)"
           (changeGroupName)="onChangeGroupName($event)"
         ></app-sections-select-group>
       </div>
diff --git a/src/app/sections/chat/drawers/add-group.drawer.component.ts b/src/app/sections/chat/drawers/add-group.drawer.component.ts
index fcd7d39..9baee3a 100644
--- a/src/app/sections/chat/drawers/add-group.drawer.component.ts
+++ b/src/app/sections/chat/drawers/add-group.drawer.component.ts
@@ -16,17 +16,17 @@ import { Store, select } from '@ngrx/store';
 
 import { MatDialog } from '@angular/material/dialog';
 
-import { GroupDetailData } from '@ucap/protocol-sync';
+import { User } from '@ucap/domain-organization';
 import {
   UserInfo as RoomUserInfo,
   UserInfoShort as RoomUserInfoShort
-} from '@ucap/protocol-room';
-import { User } from '@ucap/protocol-info';
+} from '@ucap/domain-chat';
 
 import { LogService } from '@ucap/ng-logger';
 import { I18nService } from '@ucap/ng-i18n';
 
 import { UserSelector } from '@ucap/ng-store-organization';
+import { GroupInfoDetail } from '@ucap/domain-group';
 import { RoomSelector } from '@ucap/ng-store-chat';
 
 import {
@@ -36,7 +36,7 @@ import {
   AlertDialogComponent,
   AlertDialogData,
   AlertDialogResult
-} from '@ucap/ng-ui';
+} from '@ucap/ng-ui/core';
 
 import { ChatDrawType } from '@app/pages/chat/types/chat-draw.type';
 import { DrawInfo } from '@app/pages/chat/models/draw-info';
@@ -55,10 +55,12 @@ export class AddGroupDrawerComponent implements OnInit, OnDestroy {
   private ngOnDestroySubject = new Subject<boolean>();
 
   @Input()
-  set roomId(value: string) {
-    this._roomId = value;
-    this.roomIdSubject.next(value);
-    this._initializeData();
+  set roomId(roomId: string) {
+    if (this._roomId !== roomId) {
+      this._roomId = roomId;
+      this.roomIdSubject.next(roomId);
+      this._initializeData();
+    }
   }
   get roomId(): string {
     return this._roomId;
@@ -81,7 +83,7 @@ export class AddGroupDrawerComponent implements OnInit, OnDestroy {
   isAddBtnInvalid = true;
 
   groupName = '';
-  selectedGroupList: GroupDetailData[] = [];
+  selectedGroupList: GroupInfoDetail[] = [];
 
   constructor(
     private i18nService: I18nService,
@@ -142,7 +144,7 @@ export class AddGroupDrawerComponent implements OnInit, OnDestroy {
 
   onChangeSelectedGroupList(data: {
     checked: boolean;
-    group: GroupDetailData;
+    group: GroupInfoDetail;
   }) {
     const i = this.selectedGroupList.findIndex((u) => u.seq === data.group.seq);
 
diff --git a/src/app/sections/chat/drawers/add-users.drawer.component.ts b/src/app/sections/chat/drawers/add-users.drawer.component.ts
index 8b0e5f6..0056961 100644
--- a/src/app/sections/chat/drawers/add-users.drawer.component.ts
+++ b/src/app/sections/chat/drawers/add-users.drawer.component.ts
@@ -16,16 +16,23 @@ import { Store, select } from '@ngrx/store';
 
 import { MatDialog } from '@angular/material/dialog';
 
-import { LocaleCode } from '@ucap/core';
-import { UserInfo, GroupDetailData } from '@ucap/protocol-sync';
-import { UserInfoSS, UserInfoF, UserInfoDN } from '@ucap/protocol-query';
+import { LocaleCode } from '@ucap/domain-common';
+import {
+  User,
+  UserInfo,
+  UserInfoSS,
+  UserInfoF,
+  UserInfoDN
+} from '@ucap/domain-organization';
+import { GroupInfoDetail } from '@ucap/domain-group';
 import {
   UserInfo as RoomUserInfo,
   UserInfoShort as RoomUserInfoShort,
   RoomInfo,
-  RoomType,
-  InviteRequest
-} from '@ucap/protocol-room';
+  RoomType
+} from '@ucap/domain-chat';
+
+import { InviteRequest } from '@ucap/protocol-room';
 
 import { I18nService } from '@ucap/ng-i18n';
 
@@ -36,21 +43,14 @@ import {
   AlertDialogComponent,
   AlertDialogData,
   AlertDialogResult
-} from '@ucap/ng-ui';
+} from '@ucap/ng-ui/core';
 
 import { environment } from '@environments';
 import { AppChatService } from '@app/services/app-chat.service';
 import { ChatDrawType } from '@app/pages/chat/types/chat-draw.type';
 import { DrawInfo } from '@app/pages/chat/models/draw-info';
-import { User } from '@ucap/protocol-info';
-
-export type UserInfoTypes =
-  | UserInfo
-  | UserInfoSS
-  | UserInfoF
-  | UserInfoDN
-  | RoomUserInfo
-  | RoomUserInfoShort;
+import { AppGroupService } from '@app/services/app-group.service';
+import { UserInfoTypes } from '@app/types';
 
 @Component({
   selector: 'app-drawer-chat-add-users',
@@ -63,10 +63,12 @@ export class AddUsersDrawerComponent implements OnInit, OnDestroy {
   private ngOnDestroySubject = new Subject<boolean>();
 
   @Input()
-  set roomId(value: string) {
-    this._roomId = value;
-    this.roomIdSubject.next(value);
-    this._initializeData();
+  set roomId(roomId: string) {
+    if (this._roomId !== roomId) {
+      this._roomId = roomId;
+      this.roomIdSubject.next(roomId);
+      this._initializeData();
+    }
   }
   get roomId(): string {
     return this._roomId;
@@ -98,7 +100,8 @@ export class AddUsersDrawerComponent implements OnInit, OnDestroy {
     public dialog: MatDialog,
     private store: Store<any>,
     private appChatService: AppChatService,
-    private changeDetectorRef: ChangeDetectorRef
+    private changeDetectorRef: ChangeDetectorRef,
+    private appGroupService: AppGroupService
   ) {
     this.maxChatRoomUser = environment.productConfig.chat.maxChatRoomUser;
   }
@@ -157,23 +160,6 @@ export class AddUsersDrawerComponent implements OnInit, OnDestroy {
     }
   }
   onConfirm() {
-    if (this.selectedUserList.length >= this.maxChatRoomUser) {
-      this.dialog.open<
-        AlertDialogComponent,
-        AlertDialogData,
-        AlertDialogResult
-      >(AlertDialogComponent, {
-        panelClass: 'min-create-dialog',
-        data: {
-          title: this.i18nService.t('chat:errors.label'),
-          html: this.i18nService.t('chat:errors.maxCountOfRoomMemberWith', {
-            maxCount: this.maxChatRoomUser
-          })
-        }
-      });
-      return;
-    }
-
     // No Change..
     if (
       !!this.selectedUserList &&
@@ -196,9 +182,28 @@ export class AddUsersDrawerComponent implements OnInit, OnDestroy {
     if (this.roomInfo.roomType === RoomType.Single) {
       this.appChatService.newOpenRoom(userSeqs, false);
     } else if (this.roomInfo.roomType === RoomType.Multi) {
+      if (this.selectedUserList.length >= this.maxChatRoomUser) {
+        this.dialog.open<
+          AlertDialogComponent,
+          AlertDialogData,
+          AlertDialogResult
+        >(AlertDialogComponent, {
+          panelClass: 'min-create-dialog',
+          data: {
+            title: this.i18nService.t('chat:errors.label'),
+            html: this.i18nService.t('chat:errors.maxCountOfRoomMemberWith', {
+              maxCount: this.maxChatRoomUser
+            })
+          }
+        });
+        return;
+      }
+
       // only target in invite users.
       userSeqs = userSeqs.filter((seq) => {
-        return !this.fixedUserList.some((info) => info.seq + '' === seq + '');
+        return !this.fixedUserList.some(
+          (info) => String(info.seq) === String(seq)
+        );
       });
 
       this.store.dispatch(
@@ -263,7 +268,7 @@ export class AddUsersDrawerComponent implements OnInit, OnDestroy {
   }
   onChangeGroupList(params: {
     isChecked: boolean;
-    groupBuddyList: { group: GroupDetailData; buddyList: UserInfo[] };
+    groupBuddyList: { group: GroupInfoDetail; buddyList: UserInfo[] };
   }) {
     if (params.isChecked) {
       params.groupBuddyList.buddyList.forEach((item) => {
@@ -285,15 +290,14 @@ export class AddUsersDrawerComponent implements OnInit, OnDestroy {
     }
   }
   onRemovedProfileSelection(userInfo: UserInfo) {
-    const i = this.selectedUserList.findIndex(
-      (u) => String(u.seq) === String(userInfo.seq)
+    const resUserList = this.appGroupService.removedProfileSelection(
+      userInfo,
+      this.selectedUserList
     );
 
-    if (-1 < i) {
-      this.selectedUserList = this.selectedUserList.filter(
-        (u) => String(u.seq) !== String(userInfo.seq)
-      );
+    if (!resUserList) {
     }
+    this.selectedUserList = resUserList;
   }
 
   removableForSelection = (userInfo: UserInfo) => {
diff --git a/src/app/sections/chat/drawers/attach-data.drawer.component.html b/src/app/sections/chat/drawers/attach-data.drawer.component.html
index 384067e..487991d 100644
--- a/src/app/sections/chat/drawers/attach-data.drawer.component.html
+++ b/src/app/sections/chat/drawers/attach-data.drawer.component.html
@@ -148,6 +148,7 @@
           fxFlexFill
         >
           <app-chat-attach-image-list
+            #appChatAttachImageList
             [fileInfoList]="filteredFileInfoList"
             [selectedList]="selectedFileInfoList"
             (changeCheck)="onToggleItem($event)"
@@ -163,6 +164,7 @@
           fxFlexFill
         >
           <app-chat-attach-file-list
+            #appChatAttachFileList
             [roomId]="roomId"
             [fileInfoList]="filteredFileInfoList"
             [selectedList]="selectedFileInfoList"
@@ -185,7 +187,11 @@
       >
         {{ 'dialog.button.del' | ucapI18n }}
       </button>
-      <button mat-stroked-button (click)="onClickChangeFolder()">
+      <button
+        mat-stroked-button
+        *ngIf="loginSession.deviceType !== DeviceType.Web"
+        (click)="onClickChangeFolder()"
+      >
         {{ 'dialog.button.changeFolder' | ucapI18n }}
       </button>
       <button
diff --git a/src/app/sections/chat/drawers/attach-data.drawer.component.ts b/src/app/sections/chat/drawers/attach-data.drawer.component.ts
index 795c3b6..12ac6cf 100644
--- a/src/app/sections/chat/drawers/attach-data.drawer.component.ts
+++ b/src/app/sections/chat/drawers/attach-data.drawer.component.ts
@@ -1,4 +1,4 @@
-import { Subject, combineLatest, merge } from 'rxjs';
+import { Subject, merge, combineLatest } from 'rxjs';
 import { takeUntil, take } from 'rxjs/operators';
 
 import {
@@ -11,22 +11,26 @@ import {
   EventEmitter,
   Output,
   Inject,
-  NgZone
+  NgZone,
+  ViewChild
 } from '@angular/core';
 
 import { Store, select } from '@ngrx/store';
 
 import { MatDialog } from '@angular/material/dialog';
 
-import { LoginSession, DeviceType } from '@ucap/core';
+import { DeviceType, FileDownloadItem } from '@ucap/domain-common';
+import { User } from '@ucap/domain-organization';
+import {
+  LoginSession,
+  LoginInfo,
+  VersionInfo
+} from '@ucap/domain-authentication';
+import { FileInfo, FileType, FileEventJson } from '@ucap/domain-chat';
+
 import { NativeService } from '@ucap/native';
-import { FileDownloadItem } from '@ucap/api';
-import { VersionInfo2Response } from '@ucap/api-public';
-import { LoginResponse } from '@ucap/protocol-authentication';
-import { RoomInfo } from '@ucap/protocol-room';
-import { FileInfo, InfoRequest } from '@ucap/protocol-file';
-import { FileType, FileEventJson } from '@ucap/protocol-event';
-import { User } from '@ucap/protocol-info';
+
+import { InfoRequest } from '@ucap/protocol-file';
 
 import { I18nService } from '@ucap/ng-i18n';
 import { UCAP_NATIVE_SERVICE } from '@ucap/ng-native';
@@ -34,19 +38,16 @@ import { UCAP_NATIVE_SERVICE } from '@ucap/ng-native';
 import { UserSelector } from '@ucap/ng-store-organization';
 import {
   LoginSelector,
-  ConfigurationSelector
+  ConfigurationSelector,
+  AuthorizationSelector
 } from '@ucap/ng-store-authentication';
-import {
-  RoomSelector,
-  ChattingSelector,
-  ChattingActions
-} from '@ucap/ng-store-chat';
+import { ChattingSelector, ChattingActions } from '@ucap/ng-store-chat';
 
 import {
   ConfirmDialogComponent,
   ConfirmDialogData,
   ConfirmDialogResult
-} from '@ucap/ng-ui';
+} from '@ucap/ng-ui/core';
 
 import { ChatDrawType } from '@app/pages/chat/types/chat-draw.type';
 import { AppAuthenticationService } from '@app/services/app-authentication.service';
@@ -55,6 +56,10 @@ import { AppChatService } from '@app/services/app-chat.service';
 
 import { FileViewerDialogData } from '../dialogs/file-viewer.dialog.component';
 
+import { AttachImageListComponent } from '@app/ucap/chat/components/attach-image-list.component';
+import { AttachFileListComponent } from '@app/ucap/chat/components/attach-file-list.component';
+import { UserPermission } from '@ucap/domain-authorization';
+
 export type SendRecvType = 'ALL' | 'SEND' | 'RECV';
 
 @Component({
@@ -68,10 +73,12 @@ export class AttachDataDrawerComponent implements OnInit, OnDestroy {
   private ngOnDestroySubject = new Subject<boolean>();
 
   @Input()
-  set roomId(value: string) {
-    this._roomId = value;
-    this.roomIdSubject.next(value);
-    this._initializeData();
+  set roomId(roomId: string) {
+    if (this._roomId !== roomId) {
+      this._roomId = roomId;
+      this.roomIdSubject.next(roomId);
+      this._initializeData();
+    }
   }
   get roomId(): string {
     return this._roomId;
@@ -95,6 +102,11 @@ export class AttachDataDrawerComponent implements OnInit, OnDestroy {
   @Output()
   closed = new EventEmitter<void>();
 
+  @ViewChild('appChatAttachImageList', { static: false })
+  appChatAttachImageList: AttachImageListComponent;
+  @ViewChild('appChatAttachFileList', { static: false })
+  appChatAttachFileList: AttachFileListComponent;
+
   originalFileInfoList: {
     fileInfo: FileInfo;
     fileDownloadItem: FileDownloadItem;
@@ -110,12 +122,12 @@ export class AttachDataDrawerComponent implements OnInit, OnDestroy {
 
   filterSendRecvType: SendRecvType = 'ALL';
 
-  versionInfo2Res: VersionInfo2Response;
-  loginRes: LoginResponse;
+  versionInfo: VersionInfo;
+  loginInfo: LoginInfo;
   user: User;
   loginSession: LoginSession;
+  userPermission: UserPermission;
 
-  roomInfo: RoomInfo;
   showDownCheckSeq: number | undefined;
 
   ChatDrawType = ChatDrawType;
@@ -137,9 +149,9 @@ export class AttachDataDrawerComponent implements OnInit, OnDestroy {
     this.store
       .pipe(
         takeUntil(this.ngOnDestroySubject),
-        select(ConfigurationSelector.versionInfo2Response)
+        select(ConfigurationSelector.versionInfo)
       )
-      .subscribe((versionInfo2Res) => (this.versionInfo2Res = versionInfo2Res));
+      .subscribe((versionInfo) => (this.versionInfo = versionInfo));
 
     this.loginSession = this.appAuthenticationService.getLoginSession();
 
@@ -164,20 +176,43 @@ export class AttachDataDrawerComponent implements OnInit, OnDestroy {
     this.selectedFileInfoList = [];
     this.showDownCheckSeq = undefined;
 
+    this.store
+      .pipe(takeUntil(this.ngOnDestroySubject), select(LoginSelector.loginInfo))
+      .subscribe((loginInfo) => {
+        this.loginInfo = loginInfo;
+      });
+    this.store
+      .pipe(takeUntil(this.ngOnDestroySubject), select(UserSelector.user))
+      .subscribe((user) => {
+        this.user = user;
+      });
+
     combineLatest([
-      this.store.pipe(select(LoginSelector.loginRes)),
-      this.store.pipe(select(UserSelector.user)),
-      this.store.pipe(select(RoomSelector.room, this.roomId)),
+      this.store.pipe(select(AuthorizationSelector.userPermission)),
       this.store.pipe(select(ChattingSelector.fileInfoList, this.roomId))
     ])
       .pipe(takeUntil(merge(this.ngOnDestroySubject, this.roomIdSubject)))
-      .subscribe(([loginRes, user, roomInfo, fileInfoList]) => {
-        this.loginRes = loginRes;
-        this.user = user;
-        this.roomInfo = roomInfo;
+      .subscribe(([userPermission, fileInfoList]) => {
+        if (!!userPermission) {
+          this.userPermission = userPermission;
+        }
 
-        if (!!fileInfoList && fileInfoList.length > 0) {
+        if (!!userPermission && !!fileInfoList && fileInfoList.length > 0) {
           this.originalFileInfoList = fileInfoList
+            .filter((item) => {
+              // filtered userPermission.fileTransferAllowedCompanyList
+              if (
+                !!userPermission.fileTransferAllowedCompanyList &&
+                userPermission.fileTransferAllowedCompanyList.length > 0
+              ) {
+                return (
+                  userPermission.fileTransferAllowedCompanyList.indexOf(
+                    item.sentMessageJson.companyCode
+                  ) > -1
+                );
+              }
+              return true;
+            })
             .map((item) => {
               return {
                 fileInfo: item,
@@ -191,8 +226,10 @@ export class AttachDataDrawerComponent implements OnInit, OnDestroy {
                 ? -1
                 : 0
             );
-          this.getFiltered();
+        } else {
+          this.originalFileInfoList = [];
         }
+        this.getFiltered();
       });
   }
 
@@ -200,6 +237,8 @@ export class AttachDataDrawerComponent implements OnInit, OnDestroy {
     this.selectedFileInfoList = [];
     this.showDownCheckSeq = undefined;
     this.drawerType = type;
+    this.changeDetectorRef.detectChanges();
+    this._refreshScroll();
   }
 
   onChangeFilterSendRecv(type: SendRecvType) {
@@ -208,12 +247,13 @@ export class AttachDataDrawerComponent implements OnInit, OnDestroy {
     this.getFiltered();
   }
 
+  private _refreshScroll() {
+    this.appChatAttachImageList.updatePsDirectiveRef();
+    this.appChatAttachFileList.updatePsDirectiveRef();
+  }
+
   getFiltered() {
-    if (
-      !!this.drawerType &&
-      !!this.originalFileInfoList &&
-      this.originalFileInfoList.length > 0
-    ) {
+    if (!!this.drawerType) {
       this.filteredFileInfoList = this.originalFileInfoList
         .filter((item) => {
           if (this.drawerType === ChatDrawType.AttachImage) {
@@ -243,6 +283,7 @@ export class AttachDataDrawerComponent implements OnInit, OnDestroy {
     }
 
     this.changeDetectorRef.detectChanges();
+    this._refreshScroll();
   }
 
   refreshList(): void {
@@ -363,9 +404,9 @@ export class AttachDataDrawerComponent implements OnInit, OnDestroy {
     const data: FileViewerDialogData = {
       fileInfos: this.filteredFileInfoList.map((item) => item.fileInfo),
       selectFileInfo: { attachmentSeq: fileInfo.seq },
-      downloadUrl: this.versionInfo2Res.downloadUrl,
+      downloadUrl: this.versionInfo.downloadUrl,
       deviceType: this.loginSession.deviceType,
-      token: this.loginRes.tokenString,
+      token: this.loginInfo.tokenString,
       userSeq: String(this.user.info.seq)
     };
     this.appChatService.openFileviwer(data);
@@ -395,7 +436,7 @@ export class AttachDataDrawerComponent implements OnInit, OnDestroy {
                   fileDownloadUrl: undefined,
                   savePath: result.filePath
                 },
-                this.loginRes,
+                this.loginInfo,
                 this.user,
                 this.loginSession
               );
@@ -420,7 +461,7 @@ export class AttachDataDrawerComponent implements OnInit, OnDestroy {
           fileDownloadUrl: undefined,
           savePath: undefined
         },
-        this.loginRes,
+        this.loginInfo,
         this.user,
         this.loginSession
       );
@@ -456,6 +497,8 @@ export class AttachDataDrawerComponent implements OnInit, OnDestroy {
               );
             }, i * 300);
           });
+
+          self.selectedFileInfoList = [];
         }
       });
   }
@@ -464,7 +507,17 @@ export class AttachDataDrawerComponent implements OnInit, OnDestroy {
   }
   onClickOpenViewer(): void {
     if (!!this.filteredFileInfoList && this.filteredFileInfoList.length > 0) {
-      this.onClickItemOpenViewer(this.filteredFileInfoList[0].fileInfo);
+      let startItem = this.filteredFileInfoList[0].fileInfo;
+      if (!!this.selectedFileInfoList && this.selectedFileInfoList.length > 0) {
+        startItem = this.selectedFileInfoList.sort((a, b) =>
+          a.fileInfo.eventSeq < b.fileInfo.eventSeq
+            ? 1
+            : a.fileInfo.eventSeq > b.fileInfo.eventSeq
+            ? -1
+            : 0
+        )[0].fileInfo;
+      }
+      this.onClickItemOpenViewer(startItem);
     }
   }
   onClickDownload(): void {
diff --git a/src/app/sections/chat/drawers/setting.drawer.component.ts b/src/app/sections/chat/drawers/setting.drawer.component.ts
index 4fdb3be..5232885 100644
--- a/src/app/sections/chat/drawers/setting.drawer.component.ts
+++ b/src/app/sections/chat/drawers/setting.drawer.component.ts
@@ -15,14 +15,13 @@ import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 
 import { Store, select } from '@ngrx/store';
 
+import { RoomInfo } from '@ucap/domain-chat';
+
 import { I18nService } from '@ucap/ng-i18n';
-import {
-  RoomInfo,
-  UpdateRequest,
-  UpdateTimerSetRequest
-} from '@ucap/protocol-room';
+import { UpdateRequest, UpdateTimerSetRequest } from '@ucap/protocol-room';
 
 import { RoomSelector, RoomActions } from '@ucap/ng-store-chat';
+import { StringUtil } from '@ucap/ng-core';
 
 @Component({
   selector: 'app-drawer-chat-setting',
@@ -35,10 +34,12 @@ export class SettingDrawerComponent implements OnInit, OnDestroy {
   private ngOnDestroySubject = new Subject<boolean>();
 
   @Input()
-  set roomId(value: string) {
-    this._roomId = value;
-    this.roomIdSubject.next(value);
-    this._initializeData();
+  set roomId(roomId: string) {
+    if (this._roomId !== roomId) {
+      this._roomId = roomId;
+      this.roomIdSubject.next(roomId);
+      this._initializeData();
+    }
   }
   get roomId(): string {
     return this._roomId;
@@ -95,7 +96,9 @@ export class SettingDrawerComponent implements OnInit, OnDestroy {
         this.chatSettingForm = this.formBuilder.group({
           roomName: [
             this.roomInfo?.roomName,
-            !this.roomInfo?.isTimeRoom ? [Validators.required] : []
+            !this.roomInfo?.isTimeRoom
+              ? [Validators.required, StringUtil.checkSpecialCharacter()]
+              : []
           ],
           changeTarget: ['me'],
           timerInterval: [this.roomInfo?.timeRoomInterval]
diff --git a/src/app/sections/chat/drawers/users.drawer.component.html b/src/app/sections/chat/drawers/users.drawer.component.html
index ceebd01..03af39a 100644
--- a/src/app/sections/chat/drawers/users.drawer.component.html
+++ b/src/app/sections/chat/drawers/users.drawer.component.html
@@ -17,6 +17,7 @@
             [checkable]="false"
             [isDialog]="false"
             [isMe]="isMe(itemInfo)"
+            [isShowForce]="isShowForce"
             (click)="onClickUser(itemInfo)"
             (openProfile)="onClickOpenProfile($event)"
             (openChatRoom)="onClickOpenChatRoom($event)"
@@ -26,7 +27,7 @@
             <app-group-profile-image-01
               ucapOrganizationProfileListItem01="profileImage"
               [userInfo]="itemInfo"
-              [versionInfo]="versionInfo2Res"
+              [versionInfo]="versionInfo"
             ></app-group-profile-image-01>
           </app-group-profile-list-item-03>
         </ng-template>
diff --git a/src/app/sections/chat/drawers/users.drawer.component.ts b/src/app/sections/chat/drawers/users.drawer.component.ts
index 576d189..1c160a9 100644
--- a/src/app/sections/chat/drawers/users.drawer.component.ts
+++ b/src/app/sections/chat/drawers/users.drawer.component.ts
@@ -16,13 +16,14 @@ import { Store, select } from '@ngrx/store';
 
 import { MatDialog } from '@angular/material/dialog';
 
-import { VersionInfo2Response } from '@ucap/api-public';
+import { User } from '@ucap/domain-organization';
 import {
   UserInfo as RoomUserInfo,
   UserInfoShort as RoomUserInfoShort,
-  ExitForcingRequest
-} from '@ucap/protocol-room';
-import { User } from '@ucap/protocol-info';
+  RoomType
+} from '@ucap/domain-chat';
+
+import { ExitForcingRequest } from '@ucap/protocol-room';
 
 import { I18nService } from '@ucap/ng-i18n';
 
@@ -34,7 +35,7 @@ import {
   ConfirmDialogComponent,
   ConfirmDialogData,
   ConfirmDialogResult
-} from '@ucap/ng-ui';
+} from '@ucap/ng-ui/core';
 
 import { ChatDrawType } from '@app/pages/chat/types/chat-draw.type';
 import { DrawInfo } from '@app/pages/chat/models/draw-info';
@@ -44,6 +45,7 @@ import {
   ProfileDialogResult
 } from '@app/sections/organization/dialogs/profile.dialog.component';
 import { AppChatService } from '@app/services/app-chat.service';
+import { VersionInfo } from '@ucap/domain-authentication';
 
 export type UserInfoTypes = RoomUserInfo | RoomUserInfoShort;
 
@@ -58,12 +60,12 @@ export class UsersDrawerComponent implements OnInit, OnDestroy {
   private ngOnDestroySubject = new Subject<boolean>();
 
   @Input()
-  set roomId(value: string) {
-    this._roomId = value;
-    if (!!this.roomIdSubject) {
-      this.roomIdSubject.next(value);
+  set roomId(roomId: string) {
+    if (this._roomId !== roomId) {
+      this._roomId = roomId;
+      this.roomIdSubject.next(roomId);
+      this._initializeData();
     }
-    this._initializeData();
   }
   get roomId(): string {
     return this._roomId;
@@ -78,10 +80,11 @@ export class UsersDrawerComponent implements OnInit, OnDestroy {
   closed = new EventEmitter<void>();
 
   user: User;
-  versionInfo2Res: VersionInfo2Response;
+  versionInfo: VersionInfo;
 
   roomUsers: RoomUserInfo[] = [];
   roomUsersShort: RoomUserInfoShort[] = [];
+  isShowForce = true;
 
   constructor(
     private i18nService: I18nService,
@@ -95,10 +98,10 @@ export class UsersDrawerComponent implements OnInit, OnDestroy {
     this.store
       .pipe(
         takeUntil(this.ngOnDestroySubject),
-        select(ConfigurationSelector.versionInfo2Response)
+        select(ConfigurationSelector.versionInfo)
       )
-      .subscribe((versionInfo2Res) => {
-        this.versionInfo2Res = versionInfo2Res;
+      .subscribe((versionInfo) => {
+        this.versionInfo = versionInfo;
       });
 
     this._initializeData();
@@ -117,14 +120,25 @@ export class UsersDrawerComponent implements OnInit, OnDestroy {
   }
 
   private _initializeData() {
+    // resset value.
+    this.isShowForce = true;
+
     combineLatest([
       this.store.pipe(select(UserSelector.user)),
+      this.store.pipe(select(RoomSelector.room, this.roomId)),
       this.store.pipe(select(RoomSelector.roomUser, this.roomId)),
       this.store.pipe(select(RoomSelector.roomUserShort, this.roomId))
     ])
       .pipe(takeUntil(merge(this.ngOnDestroySubject, this.roomIdSubject)))
-      .subscribe(([user, roomUser, roomUserShort]) => {
+      .subscribe(([user, room, roomUser, roomUserShort]) => {
         this.user = user;
+
+        // room
+        if (!!room && room.roomType === RoomType.Single) {
+          this.isShowForce = false;
+        }
+
+        // room Users
         if (
           !!roomUser &&
           !!roomUser.userInfos &&
@@ -179,7 +193,7 @@ export class UsersDrawerComponent implements OnInit, OnDestroy {
     });
   }
   onClickOpenChatRoom(userSeq: string): void {
-    this.appChatService.newOpenRoom([userSeq], false);
+    this.appChatService.newOpenRoom([userSeq], false, this.user);
   }
   onClickSendMessage(userSeq: string): void {}
 
diff --git a/src/app/sections/group/components/info.section.component.html b/src/app/sections/group/components/info.section.component.html
index 6df7521..bcdd702 100644
--- a/src/app/sections/group/components/info.section.component.html
+++ b/src/app/sections/group/components/info.section.component.html
@@ -11,6 +11,7 @@
         *ngFor="let roomInfo of filteredRoomList"
         [moreable]="false"
         [roomInfo]="roomInfo"
+        [dateFormat]="'C'"
         (click)="onClickRoomItem($event, roomInfo)"
       ></app-chat-room-list-item-01>
 
diff --git a/src/app/sections/group/components/info.section.component.scss b/src/app/sections/group/components/info.section.component.scss
index 7c5a8de..e6635a5 100644
--- a/src/app/sections/group/components/info.section.component.scss
+++ b/src/app/sections/group/components/info.section.component.scss
@@ -27,7 +27,7 @@
   .bookmark {
     display: flex;
     flex-direction: column;
-    flex-grow: 1;
+    //flex-grow: 1;
     @include screen(xs) {
       height: 100%;
     }
diff --git a/src/app/sections/group/components/info.section.component.ts b/src/app/sections/group/components/info.section.component.ts
index 21b7c3f..a6d0122 100644
--- a/src/app/sections/group/components/info.section.component.ts
+++ b/src/app/sections/group/components/info.section.component.ts
@@ -13,8 +13,8 @@ import {
 import { Store, select } from '@ngrx/store';
 import { Dictionary } from '@ngrx/entity';
 
-import { RoomInfo, RoomType } from '@ucap/protocol-room';
-import { User } from '@ucap/protocol-info';
+import { User } from '@ucap/domain-organization';
+import { RoomInfo, RoomType } from '@ucap/domain-chat';
 
 import { I18nService } from '@ucap/ng-i18n';
 
@@ -194,7 +194,9 @@ export class InfoSectionComponent implements OnInit, OnDestroy {
 
           return (
             users.filter(
-              (userInfo) => Number(userInfo.seq + '') === Number(userSeq + '')
+              (userInfo) =>
+                !!userInfo.isJoinRoom &&
+                Number(userInfo.seq + '') === Number(userSeq + '')
             ).length > 0
           );
         }
diff --git a/src/app/sections/group/components/list.section.component.html b/src/app/sections/group/components/list.section.component.html
index 81ad874..0de1e67 100644
--- a/src/app/sections/group/components/list.section.component.html
+++ b/src/app/sections/group/components/list.section.component.html
@@ -9,9 +9,10 @@
     (clicked)="onClickUser($event)"
     (selectGroupMenu)="onSelectGroupMenu($event)"
     (selectProfileMenu)="onSelectProfileMenu($event)"
-    (floatingProfileMenu)="onFloatingProfileMenu($event)"
+    (clickProfileMenu)="onClickProfileMenu($event)"
     (profileMenu)="onProfileMenu($event)"
     (groupDestroy)="onGroupDestroy($event)"
+    (openProfile)="onOpenProfile($event)"
   ></app-group-expansion-01>
 </div>
 <div
@@ -19,10 +20,13 @@
   class="list-container search-wrpper"
 >
   <app-group-profile-list
+    #appProfileList
     [searchData]="_searchData"
     [checkable]="checkable"
     [isMoreMenu]="false"
-    (floatingProfileMenu)="onFloatingProfileMenu($event)"
+    (clickProfileMenu)="onClickProfileMenu($event)"
     (clicked)="onClickUser($event)"
+    (openProfile)="onOpenProfile($event)"
+    (searched)="onSearched($event)"
   ></app-group-profile-list>
 </div>
diff --git a/src/app/sections/group/components/list.section.component.ts b/src/app/sections/group/components/list.section.component.ts
index 7dd5e56..8d453eb 100644
--- a/src/app/sections/group/components/list.section.component.ts
+++ b/src/app/sections/group/components/list.section.component.ts
@@ -16,43 +16,39 @@ import {
 
 import { Router } from '@angular/router';
 
-import { MatDialog } from '@angular/material/dialog';
-
 import { Store, select } from '@ngrx/store';
 
-import { UserInfo, GroupDetailData } from '@ucap/protocol-sync';
-import { User } from '@ucap/protocol-info';
+import { MatDialog } from '@angular/material/dialog';
+
 import {
+  User,
+  UserInfo,
   UserInfoSS,
   UserInfoF,
   UserInfoDN,
   DeptSearchType
-} from '@ucap/protocol-query';
-import { UserInfo as RoomUserInfo } from '@ucap/protocol-room';
+} from '@ucap/domain-organization';
+import { GroupInfoDetail } from '@ucap/domain-group';
 
 import { LogService } from '@ucap/ng-logger';
 import { I18nService } from '@ucap/ng-i18n';
 import { SessionStorageService } from '@ucap/ng-web-storage';
 import { QueryProtocolService } from '@ucap/ng-protocol-query';
 
-import {
-  PresenceActions,
-  PresenceSelector,
-  UserSelector
-} from '@ucap/ng-store-organization';
+import { PresenceActions, UserSelector } from '@ucap/ng-store-organization';
 
 import {
   AlertDialogComponent,
   AlertDialogData,
   AlertDialogResult
-} from '@ucap/ng-ui';
+} from '@ucap/ng-ui/core';
 
 import { Expansion01Component as AppExpansion01Component } from '@app/ucap/group/components/expansion-01.component';
 import { AppAuthenticationService } from '@app/services/app-authentication.service';
 import { SearchData } from '@app/ucap/organization/models/search-data';
 import { UserStore } from '@app/models/user-store';
 import { AppChatService } from '@app/services/app-chat.service';
-import { GroupManageType } from '@app/types';
+import { GroupManageType, UserInfoTypes } from '@app/types';
 import { AppGroupService } from '@app/services/app-group.service';
 import { LoginSession } from '@app/models/login-session';
 import { GroupOpenInfo } from '@app/models/group-open-info';
@@ -69,13 +65,17 @@ import {
   EditUserDialogResult
 } from '../dialogs/edit-user.dialog.component';
 import { SortViewType } from '@app/pages/group/types/sort-view.type';
-
-export type UserInfoTypes =
-  | UserInfo
-  | UserInfoSS
-  | UserInfoF
-  | UserInfoDN
-  | RoomUserInfo;
+import { BuddySelector } from '@ucap/ng-store-group';
+import {
+  EditInlineInputDialogComponent,
+  EditInlineInputDialogData
+} from '../dialogs/edit-inline-input.dialog.component';
+import { ProfileListComponent as AppProfileListComponent } from '@app/ucap/group/components/profile-list.component';
+import { ProfileMenuType } from '@ucap/ng-ui-organization';
+import { GroupMenuType } from '@ucap/ng-ui-group';
+import { ConferenceCreateRequest } from '@ucap/api-prompt';
+import { LoginSelector } from '@ucap/ng-store-authentication';
+import { LoginInfo } from '@ucap/domain-authentication';
 
 @Component({
   selector: 'app-sections-group-list',
@@ -129,16 +129,24 @@ export class ListSectionComponent implements OnInit, OnDestroy {
   @Output()
   clickUser = new EventEmitter<UserInfo>();
 
+  @Output()
+  openProfile = new EventEmitter<UserInfo>();
+
   @ViewChild('appGroupExpansion01', { static: false })
   appGroupExpansion: AppExpansion01Component;
 
   @ViewChild('nicknameInput', { static: false })
   nicknameInput: ElementRef<HTMLInputElement>;
 
+  @ViewChild('appProfileList', { static: false })
+  appProfileList: AppProfileListComponent;
+
+  loginInfo: LoginInfo;
   loginSession: LoginSession;
   user: User;
 
   searchUserInfos: UserInfoSS[] = [];
+  buddyList: UserInfoTypes[];
 
   private ngOnDestroySubject: Subject<void> = new Subject();
   private userStore: UserStore;
@@ -165,12 +173,22 @@ export class ListSectionComponent implements OnInit, OnDestroy {
       .subscribe((user) => {
         this.user = user;
       });
+    this.store
+      .pipe(takeUntil(this.ngOnDestroySubject), select(LoginSelector.loginInfo))
+      .subscribe((loginInfo) => {
+        this.loginInfo = loginInfo;
+      });
     this.appAuthenticationService
       .getLoginSession$()
       .pipe(takeUntil(this.ngOnDestroySubject))
       .subscribe((loginSession) => {
         this.loginSession = loginSession;
       });
+    this.store
+      .pipe(takeUntil(this.ngOnDestroySubject), select(BuddySelector.buddies))
+      .subscribe((buddies) => {
+        this.buddyList = buddies;
+      });
   }
 
   ngOnDestroy(): void {
@@ -239,9 +257,20 @@ export class ListSectionComponent implements OnInit, OnDestroy {
     this.clickUser.emit(params.userInfo);
   }
 
+  onOpenProfile(userInfo: UserInfo) {
+    this.openProfile.emit(userInfo);
+  }
+
   onClickSearchUser(event: MouseEvent, userInfo: UserInfo) {
     this.onClickUser({ event, userInfo });
   }
+
+  onSearched(userInfo: UserInfoSS[]) {
+    if (!!this.appProfileList) {
+      this.appProfileList.psUpdate();
+    }
+  }
+
   onGroupDestroy(groupOpenInfo: GroupOpenInfo) {
     this.appAuthenticationService.setLoginSession({
       ...this.loginSession,
@@ -259,12 +288,12 @@ export class ListSectionComponent implements OnInit, OnDestroy {
     console.log(event);
   }
   onSelectGroupMenu(params: {
-    menuType: string;
-    groupBuddyList: { group: GroupDetailData; buddyList: UserInfo[] };
+    menuType: GroupMenuType;
+    groupBuddyList: { group: GroupInfoDetail; buddyList: UserInfo[] };
     rect: any;
   }) {
     switch (params.menuType) {
-      case 'CHAT':
+      case GroupMenuType.chat:
         {
           this.appChatService.newOpenRoom(
             params.groupBuddyList.group.userSeqs,
@@ -273,7 +302,7 @@ export class ListSectionComponent implements OnInit, OnDestroy {
           );
         }
         break;
-      case 'SEND_MESSAGE':
+      case GroupMenuType.message:
         {
           return;
 
@@ -289,12 +318,12 @@ export class ListSectionComponent implements OnInit, OnDestroy {
           });
         }
         break;
-      case 'RENAME':
+      case GroupMenuType.rename:
         {
           this.renameGroup(params);
         }
         break;
-      case 'MANAGE_MEMBER':
+      case GroupMenuType.management:
         {
           const dialogRef = this.dialog.open<
             ManageDialogComponent,
@@ -312,7 +341,7 @@ export class ListSectionComponent implements OnInit, OnDestroy {
             .pipe(take(1))
             .subscribe((result) => {
               if (!!result && !!result.choice) {
-                this.appGroupService.addMemberToGroup(
+                this.appGroupService.updateMemberToGroup(
                   result.group,
                   result.selelctUserList
                 );
@@ -326,25 +355,27 @@ export class ListSectionComponent implements OnInit, OnDestroy {
             });
         }
         break;
-      case 'COPY_MEMBER':
+      case GroupMenuType.copyGroup:
         {
           this.editUserDialog(
+            this.i18nService.t('group:dialog.title.copyGroup'),
             GroupManageType.Copy,
             params.groupBuddyList.group,
             params.groupBuddyList.buddyList
           );
         }
         break;
-      case 'MOVE_MEMBER':
+      case GroupMenuType.moveGroup:
         {
           this.editUserDialog(
+            this.i18nService.t('group:dialog.title.moveGroup'),
             GroupManageType.Move,
             params.groupBuddyList.group,
             params.groupBuddyList.buddyList
           );
         }
         break;
-      case 'DELETE':
+      case GroupMenuType.deleteGroup:
         {
           this.appGroupService.removeGroup(params.groupBuddyList);
         }
@@ -355,30 +386,40 @@ export class ListSectionComponent implements OnInit, OnDestroy {
   }
 
   onSelectProfileMenu(params: {
-    menuType: string;
+    menuType: ProfileMenuType;
     userInfo: UserInfoF;
-    group: GroupDetailData;
+    group: GroupInfoDetail;
     rect: any;
   }) {
     switch (params.menuType) {
-      case 'REGISTER_FAVORITE':
+      case ProfileMenuType.favorite:
         this.appGroupService.updateBuddy(
           params.userInfo,
           !params.userInfo.isFavorit
         );
         break;
-      case 'REGISTER_NICKNAME':
+      case ProfileMenuType.nickname:
         {
           this.editNickname(params.userInfo, params.rect);
         }
         break;
-      case 'COPY_BUDDY':
-        this.editUserDialog('COPY_BUDDY', params.group, [params.userInfo]);
+      case ProfileMenuType.copyBuddy:
+        this.editUserDialog(
+          this.i18nService.t('group:contextMenu.copyBuddy'),
+          GroupManageType.Copy,
+          params.group,
+          [params.userInfo]
+        );
         break;
-      case 'MOVE_BUDDY':
-        this.editUserDialog('MOVE_BUDDY', params.group, [params.userInfo]);
+      case ProfileMenuType.moveBuddy:
+        this.editUserDialog(
+          this.i18nService.t('group:contextMenu.moveBuddy'),
+          GroupManageType.Move,
+          params.group,
+          [params.userInfo]
+        );
         break;
-      case 'REMOVE_BUDDY':
+      case ProfileMenuType.removeBuddy:
         {
           this.removeBuddy(params.userInfo, params.group);
         }
@@ -386,47 +427,72 @@ export class ListSectionComponent implements OnInit, OnDestroy {
     }
   }
 
-  onFloatingProfileMenu(params: { menuType: string; userInfo: UserInfoF }) {
+  onClickProfileMenu(params: {
+    menuType: ProfileMenuType;
+    userInfo: UserInfoF;
+  }) {
     switch (params.menuType) {
-      case 'CHAT':
+      case ProfileMenuType.chat:
         this.appChatService.newOpenRoom(
           [params.userInfo.seq as any],
           false,
           this.user
         );
         break;
-      case 'MESSAGE':
+      case ProfileMenuType.message:
         break;
-      case 'MOBILE':
+      case ProfileMenuType.mobile:
         break;
-      case 'OFFICE':
+      case ProfileMenuType.office:
         break;
-      case 'VIDEO_CONFERENCE':
+      case ProfileMenuType.videoConference:
+        {
+          const req: ConferenceCreateRequest = {
+            userSeq: String(this.user.info.seq),
+            deviceType: this.loginSession.deviceType,
+            tokenKey: this.loginInfo.tokenString,
+            targetUserSeqs: [params.userInfo.seq]
+          };
+          this.appChatService.openVideoConference(req);
+        }
         break;
     }
   }
 
   private renameGroup(params: {
-    menuType: string;
-    groupBuddyList: { group: GroupDetailData; buddyList: UserInfo[] };
+    menuType: GroupMenuType;
+    groupBuddyList: { group: GroupInfoDetail; buddyList: UserInfo[] };
     rect: any;
   }) {
-    this.appGroupService.updateGroupName(
+    this.showEditInlineInput(
+      'group',
+      params.rect,
       params.groupBuddyList.group,
-      params.rect
-    );
+      null
+    ).then((result) => {
+      this.appGroupService.updateGroupName(
+        params.groupBuddyList.group,
+        result.curName
+      );
+    });
   }
 
-  private updateMemberByResult(result: EditUserDialogResult) {
-    let targetGroup: GroupDetailData;
-    let targetUserSeqs: string[];
+  private editUserResult(result: EditUserDialogResult) {
+    if (!result) {
+      return;
+    }
 
-    if (result.type === GroupManageType.Add) {
-      this.appGroupService.addMemberToGroup(
-        result.group,
+    let isCreateGroup = false;
+
+    if (!!result.groupName && result.groupName.trim() !== '') {
+      isCreateGroup = true;
+      this.appGroupService.createGroup(
+        result.groupName,
         result.selelctUserList
       );
-    } else if (result.type === GroupManageType.Copy) {
+    }
+
+    if (result.type === GroupManageType.Copy) {
       if (!!result.selectGroupList && result.selectGroupList.length > 0) {
         result.selectGroupList.map((g) => {
           this.appGroupService.copyMemberToGroup(g, result.selelctUserList);
@@ -434,7 +500,8 @@ export class ListSectionComponent implements OnInit, OnDestroy {
       }
     } else if (result.type === GroupManageType.Move) {
       const fromGroup = result.group;
-      let toGroup: GroupDetailData;
+      let toGroup: GroupInfoDetail;
+      let targetUserSeqs: string[];
 
       if (!!result.selectGroupList && result.selectGroupList.length > 0) {
         result.selectGroupList.forEach((g, idx) => {
@@ -456,35 +523,22 @@ export class ListSectionComponent implements OnInit, OnDestroy {
             }
           }
         });
+      } else if (
+        !!isCreateGroup &&
+        !!result.selelctUserList &&
+        result.selelctUserList.length > 0
+      ) {
+        this.appGroupService.removeMember(result.group, result.selelctUserList);
       }
-    } else if (result.type === GroupManageType.Create) {
-      this.appGroupService.createGroup(
-        result.groupName,
-        result.selelctUserList
-      );
     }
   }
 
   private editUserDialog(
-    type: string,
-    group: GroupDetailData,
+    title: string,
+    dialogType: GroupManageType,
+    group: GroupInfoDetail,
     userInfos: UserInfoTypes[]
   ) {
-    let title = '';
-    let dialogType: GroupManageType;
-    if (type === 'COPY_BUDDY') {
-      dialogType = GroupManageType.Copy;
-      title = this.i18nService.t('group:contextMenu.copyBuddy');
-    } else if (type === 'MOVE_BUDDY') {
-      dialogType = GroupManageType.Move;
-      title = this.i18nService.t('group:contextMenu.moveBuddy');
-    } else if (type === GroupManageType.Copy) {
-      dialogType = GroupManageType.Copy;
-      title = this.i18nService.t('group:dialog.title.copyGroup');
-    } else if (type === GroupManageType.Move) {
-      dialogType = GroupManageType.Move;
-      title = this.i18nService.t('group:dialog.title.moveGroup');
-    }
     const dialogRef = this.dialog.open<
       EditUserDialogComponent,
       EditUserDialogData,
@@ -503,7 +557,9 @@ export class ListSectionComponent implements OnInit, OnDestroy {
       .pipe(
         take(1),
         map((result: EditUserDialogResult) => {
-          this.updateMemberByResult(result);
+          if (!!result) {
+            this.editUserResult(result);
+          }
         }),
         catchError((err) => {
           return of(err);
@@ -512,7 +568,7 @@ export class ListSectionComponent implements OnInit, OnDestroy {
       .subscribe();
   }
 
-  private removeBuddy(userInfo: UserInfoF, group: GroupDetailData) {
+  private removeBuddy(userInfo: UserInfoF, group: GroupInfoDetail) {
     this.appGroupService.removeMemberToGroup(
       this.i18nService.t('group:dialog.removeBuddyConfirm', {
         targetMember: `${userInfo.name}`
@@ -522,8 +578,89 @@ export class ListSectionComponent implements OnInit, OnDestroy {
     );
   }
   private editNickname(userInfo: UserInfoF, rect: any) {
-    this.appGroupService.updateNickname(userInfo, undefined, rect);
+    const isBuddy = this.appGroupService.checkBuddy(this.buddyList, userInfo);
+
+    if (!isBuddy) {
+      return;
+    }
+
+    this.showEditInlineInput('nickname', rect, null, userInfo).then(
+      (result) => {
+        this.appGroupService.updateNickname(result.userInfo, result.curName);
+      }
+    );
   }
 
-  onChangeNickname(nick: string) {}
+  private showEditInlineInput(
+    type: string,
+    rect: any,
+    group?: GroupInfoDetail,
+    userInfo?: UserInfoF
+  ): Promise<{
+    type: string;
+    group?: GroupInfoDetail;
+    userInfo?: UserInfoF;
+    curName: string;
+  }> {
+    return new Promise<{
+      type: string;
+      group?: GroupInfoDetail;
+      userInfo?: UserInfoF;
+      curName: string;
+    }>((resolve, rejects) => {
+      try {
+        let dialogWidth: string;
+        let dialogHeight: string;
+        let dialogData: EditInlineInputDialogData;
+
+        if (type === 'group') {
+          dialogWidth = rect.width;
+          dialogHeight = rect.height;
+          dialogData = {
+            type: 'GROUP_NAME',
+            curValue: group.name,
+            placeholder: this.i18nService.t('group:dialog.newGroupName'),
+            maxLength: 20,
+            left: rect.left,
+            top: rect.top
+          };
+        } else {
+          dialogWidth = rect.width - 30 + '';
+          dialogHeight = rect.height;
+          dialogData = {
+            type: 'NICKNAME',
+            curValue: userInfo.nickName,
+            placeholder: this.i18nService.t('group:dialog.newNickname'),
+            maxLength: 20,
+            left: rect.left + 70,
+            top: rect.top
+          };
+        }
+        const dialogRef = this.dialog.open(EditInlineInputDialogComponent, {
+          width: dialogWidth,
+          height: dialogHeight,
+          panelClass: 'ucap-edit-group-name-dialog',
+          data: dialogData
+        });
+
+        dialogRef
+          .afterClosed()
+          .pipe(
+            take(1),
+            map((result) => {
+              if (
+                !!result &&
+                result.choice &&
+                result.curValue.localeCompare(name) !== 0
+              ) {
+                resolve({ type, group, userInfo, curName: result.curValue });
+              }
+            })
+          )
+          .subscribe();
+      } catch (error) {
+        rejects(error);
+      }
+    });
+  }
 }
diff --git a/src/app/sections/group/components/profile.section.component.ts b/src/app/sections/group/components/profile.section.component.ts
index e63b0e9..9d529d6 100644
--- a/src/app/sections/group/components/profile.section.component.ts
+++ b/src/app/sections/group/components/profile.section.component.ts
@@ -12,13 +12,13 @@ import {
 
 import { Store, select } from '@ngrx/store';
 
-import { UserInfoSS, AuthResponse } from '@ucap/protocol-query';
-import { User } from '@ucap/protocol-info';
+import { User, UserInfoSS } from '@ucap/domain-organization';
 
 import { QueryProtocolService } from '@ucap/ng-protocol-query';
 
 import { UserSelector } from '@ucap/ng-store-organization';
 import { AuthorizationSelector } from '@ucap/ng-store-authentication';
+import { UserPermission } from '@ucap/domain-authorization';
 
 @Component({
   selector: 'app-sections-group-profile',
@@ -40,7 +40,7 @@ export class ProfileSectionComponent implements OnInit, OnDestroy {
   _userSeq: string;
 
   user: User;
-  authRes: AuthResponse;
+  userPermission: UserPermission;
   isMe = false;
 
   profileUserInfo: UserInfoSS;
@@ -74,10 +74,10 @@ export class ProfileSectionComponent implements OnInit, OnDestroy {
     this.store
       .pipe(
         takeUntil(this.ngOnDestroySubject),
-        select(AuthorizationSelector.authResponse)
+        select(AuthorizationSelector.userPermission)
       )
-      .subscribe((authRes) => {
-        this.authRes = authRes;
+      .subscribe((userPermission) => {
+        this.userPermission = userPermission;
       });
   }
 
diff --git a/src/app/sections/group/components/select-group.section.component.html b/src/app/sections/group/components/select-group.section.component.html
index fa0eb47..b6c371e 100644
--- a/src/app/sections/group/components/select-group.section.component.html
+++ b/src/app/sections/group/components/select-group.section.component.html
@@ -3,6 +3,7 @@
   <div *ngIf="!!searchable" class="ucap-dialog-search">
     <app-organization-search-for-tenant
       placeholder="이름 부서명, 전화번호, 이메일"
+      [isBackspaceCanceled]="isBackspaceCanceled"
       [(searchData)]="companySearchData"
       (canceled)="onCanceled()"
     >
@@ -10,7 +11,11 @@
   </div>
   <!-- [E] 검색-->
 
-  <div *ngIf="!isSearch" class="ucap-dialog-select-group-contnet">
+  <div
+    *ngIf="!isSearch"
+    class="ucap-dialog-select-group-contnet"
+    [ngClass]="!!searchable ? '' : 'ucap-dialog-select-group-search-disable'"
+  >
     <div class="ucap-dialog-app-group-name-input">
       <div class="new-group-add">
         <div class="sub-title">
@@ -46,7 +51,7 @@
               <mat-checkbox
                 #groupCheckbox
                 [checked]="getCheckedGroup(group)"
-                (change)="onCheckForGroup($event.source, group)"
+                (change)="onToggleCheckGroup($event.source, group)"
               ></mat-checkbox>
             </div>
           </div>
@@ -74,7 +79,7 @@
           [checkable]="checkable"
           [isDialog]="isDialog"
           (searched)="onSearched($event)"
-          (toggleCheck)="onToggleCheck($event)"
+          (toggleCheck)="onToggleCheckUser($event)"
           [selectedUser]="selectedUserList"
           class="ucap-dialog-search-result-container"
         ></app-group-profile-list>
diff --git a/src/app/sections/group/components/select-group.section.component.scss b/src/app/sections/group/components/select-group.section.component.scss
index 7135881..3acf701 100644
--- a/src/app/sections/group/components/select-group.section.component.scss
+++ b/src/app/sections/group/components/select-group.section.component.scss
@@ -3,6 +3,9 @@
     display: flex;
     flex-direction: column;
     height: calc(100% - 50px);
+    &.ucap-dialog-select-group-search-disable {
+      height: 100%;
+    }
     .ucap-dialog-app-group-name-input {
       display: flex;
       flex-direction: row;
@@ -27,6 +30,8 @@
       }
     }
     .ucap-dialog-group-list-container {
+      display: flex;
+      flex-direction: column;
       overflow: hidden;
       .sub-title {
         height: 40px;
@@ -40,6 +45,7 @@
         }
       }
       .group-list-container {
+        position: relative;
         height: calc(100% - 40px);
         overflow-y: auto;
         &-scrollbar {
diff --git a/src/app/sections/group/components/select-group.section.component.ts b/src/app/sections/group/components/select-group.section.component.ts
index 3f15902..728034a 100644
--- a/src/app/sections/group/components/select-group.section.component.ts
+++ b/src/app/sections/group/components/select-group.section.component.ts
@@ -19,9 +19,13 @@ import { MatCheckbox, MatCheckboxChange } from '@angular/material/checkbox';
 
 import { Store, select } from '@ngrx/store';
 
-import { UserInfoSS, UserInfoF, UserInfoDN } from '@ucap/protocol-query';
-import { GroupDetailData, UserInfo } from '@ucap/protocol-sync';
-import { UserInfo as RoomUserInfo } from '@ucap/protocol-room';
+import {
+  UserInfo,
+  UserInfoSS,
+  UserInfoF,
+  UserInfoDN
+} from '@ucap/domain-organization';
+import { GroupInfoDetail } from '@ucap/domain-group';
 
 import { I18nService } from '@ucap/ng-i18n';
 
@@ -29,17 +33,8 @@ import { GroupSelector } from '@ucap/ng-store-group';
 
 import { SearchData } from '@app/ucap/organization/models/search-data';
 import { ProfileListComponent as AppGroupProfileListComponent } from '@app/ucap/group/components/profile-list.component';
-import {
-  PerfectScrollbarDirective,
-  PerfectScrollbarComponent
-} from 'ngx-perfect-scrollbar';
-
-export type UserInfoTypes =
-  | UserInfo
-  | UserInfoSS
-  | UserInfoF
-  | UserInfoDN
-  | RoomUserInfo;
+import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
+import { UserInfoTypes } from '@app/types';
 
 @Component({
   selector: 'app-sections-select-group',
@@ -50,9 +45,6 @@ export type UserInfoTypes =
 })
 export class SelectGroupSectionComponent
   implements OnInit, OnDestroy, AfterViewInit {
-  @Input()
-  isMemberMove: boolean;
-
   @Input()
   isDialog = false;
 
@@ -63,7 +55,7 @@ export class SelectGroupSectionComponent
   searchable = true;
 
   @Input()
-  curGroup: GroupDetailData;
+  curGroup: GroupInfoDetail;
 
   @Input()
   set selectedUserList(userList: UserInfoTypes[]) {
@@ -78,13 +70,13 @@ export class SelectGroupSectionComponent
   _selectedUserList: UserInfoTypes[];
 
   @Input()
-  selectedGroupList: GroupDetailData[] = [];
+  selectedGroupList: GroupInfoDetail[] = [];
 
   @Input()
   groupName: string;
 
   @Output()
-  changeUserList: EventEmitter<
+  toggleCheckUser: EventEmitter<
     {
       checked: boolean;
       userInfo: UserInfoSS;
@@ -92,9 +84,9 @@ export class SelectGroupSectionComponent
   > = new EventEmitter();
 
   @Output()
-  changeGroupList: EventEmitter<{
+  toggleCheckGroup: EventEmitter<{
     checked: boolean;
-    group: GroupDetailData;
+    group: GroupInfoDetail;
   }> = new EventEmitter();
 
   @Output()
@@ -138,10 +130,11 @@ export class SelectGroupSectionComponent
     private i18nService: I18nService
   ) {}
 
+  isBackspaceCanceled = true;
   isSearch = false;
   searchWord: string;
   searchUserInfos: UserInfoSS[] = [];
-  groupList: GroupDetailData[];
+  groupList: GroupInfoDetail[];
 
   groupChecked = false;
 
@@ -149,9 +142,9 @@ export class SelectGroupSectionComponent
     this.store
       .pipe(takeUntil(this.ngOnDestroySubject), select(GroupSelector.groups))
       .subscribe((groups) => {
-        let defaultGroup: GroupDetailData;
-        const buddyGroup: GroupDetailData[] = [];
-        const tempOrder: GroupDetailData[] = [];
+        let defaultGroup: GroupInfoDetail;
+        const buddyGroup: GroupInfoDetail[] = [];
+        const tempOrder: GroupInfoDetail[] = [];
 
         groups.forEach((group) => {
           if (0 === group.seq) {
@@ -194,7 +187,7 @@ export class SelectGroupSectionComponent
     }
   }
 
-  onCheckForGroup(checkbox: MatCheckbox, group: GroupDetailData) {
+  onToggleCheckGroup(checkbox: MatCheckbox, group: GroupInfoDetail) {
     const findGroup = this.selectedGroupList.filter(
       (selectGroup) => selectGroup.seq === group.seq
     );
@@ -212,11 +205,11 @@ export class SelectGroupSectionComponent
     } else {
       this.checkboxAllGroup.checked = false;
     }
-    this.changeGroupList.emit({ checked: checkbox.checked, group });
+    this.toggleCheckGroup.emit({ checked: checkbox.checked, group });
   }
 
-  onToggleCheck(datas: { checked: boolean; userInfo: UserInfoSS }[]) {
-    this.changeUserList.emit(datas);
+  onToggleCheckUser(datas: { checked: boolean; userInfo: UserInfoSS }[]) {
+    this.toggleCheckUser.emit(datas);
   }
 
   onSearched(users: UserInfoSS[]) {
@@ -236,7 +229,7 @@ export class SelectGroupSectionComponent
   }
 
   /** 개별 그룹 체크여부 */
-  getCheckedGroup(group: GroupDetailData) {
+  getCheckedGroup(group: GroupInfoDetail) {
     if (!!this.selectedGroupList && this.selectedGroupList.length > 0) {
       return (
         this.selectedGroupList.filter((item) => item.seq === group.seq).length >
@@ -247,7 +240,7 @@ export class SelectGroupSectionComponent
     return false;
   }
 
-  checkVisible(group: GroupDetailData): boolean {
+  checkVisible(group: GroupInfoDetail): boolean {
     if (!!this.curGroup && this.curGroup.seq === group.seq) {
       return false;
     }
@@ -263,12 +256,12 @@ export class SelectGroupSectionComponent
     if (event.checked) {
       this.groupList.map((group) => {
         this.selectedGroupList.push(group);
-        this.changeGroupList.emit({ checked: true, group });
+        this.toggleCheckGroup.emit({ checked: true, group });
       });
     } else {
       this.selectedGroupList = [];
       this.groupList.map((group) =>
-        this.changeGroupList.emit({ checked: false, group })
+        this.toggleCheckGroup.emit({ checked: false, group })
       );
     }
   }
diff --git a/src/app/sections/group/components/select-user.section.component.html b/src/app/sections/group/components/select-user.section.component.html
index 3a95b9e..243822a 100644
--- a/src/app/sections/group/components/select-user.section.component.html
+++ b/src/app/sections/group/components/select-user.section.component.html
@@ -4,6 +4,8 @@
     <div class="ucap-dialog-search">
       <app-organization-search-for-tenant
         placeholder="이름 부서명, 전화번호, 이메일"
+        [isBackspaceCanceled]="isBackspaceCanceled"
+        [filteredTimerChatAuth]="filteredTimerChatAuth"
         [(searchData)]="companySearchData"
         (canceled)="onCanceled()"
         class="select-user-section-search"
@@ -87,7 +89,7 @@
             [fixedUserList]="fixedUserList"
             [checkable]="checkable"
             [isDialog]="isDialog"
-            (toggleCheck)="onToggleCheckUser($event)"
+            (toggleCheckUser)="onToggleCheckUser($event)"
             (searched)="onSearched($event)"
             class="ucap-dialog-search-result-container"
           ></app-group-profile-list>
diff --git a/src/app/sections/group/components/select-user.section.component.ts b/src/app/sections/group/components/select-user.section.component.ts
index f0fb0fc..5a6674b 100644
--- a/src/app/sections/group/components/select-user.section.component.ts
+++ b/src/app/sections/group/components/select-user.section.component.ts
@@ -17,8 +17,8 @@ import { MatCheckboxChange } from '@angular/material/checkbox';
 
 import { Store } from '@ngrx/store';
 
-import { UserInfo, GroupDetailData } from '@ucap/protocol-sync';
-import { DeptInfo, UserInfoSS } from '@ucap/protocol-query';
+import { UserInfo, DeptInfo, UserInfoSS } from '@ucap/domain-organization';
+import { GroupInfoDetail } from '@ucap/domain-group';
 
 import { SearchData } from '@app/ucap/organization/models/search-data';
 import { ProfileListComponent as AppGroupProfileListComponent } from '@app/ucap/group/components/profile-list.component';
@@ -50,7 +50,10 @@ export class SelectUserSectionComponent
   displayRootDepartment = false;
 
   @Input()
-  selectedGroupHeader: GroupDetailData;
+  selectedGroupHeader: GroupInfoDetail;
+
+  @Input()
+  filteredTimerChatAuth = false;
 
   @Output()
   toggleCheckUser: EventEmitter<
@@ -63,7 +66,7 @@ export class SelectUserSectionComponent
   @Output()
   toggleCheckGroup: EventEmitter<{
     isChecked: boolean;
-    groupBuddyList: { group: GroupDetailData; buddyList: UserInfo[] };
+    groupBuddyList: { group: GroupInfoDetail; buddyList: UserInfo[] };
   }> = new EventEmitter();
 
   @ViewChild('groupDialogExpasion', { static: false })
@@ -90,6 +93,7 @@ export class SelectUserSectionComponent
   // tslint:disable-next-line: variable-name
   _companySearchData: SearchData;
 
+  isBackspaceCanceled = true;
   isSearch = false;
 
   isAllCheck: boolean;
@@ -134,12 +138,15 @@ export class SelectUserSectionComponent
 
   onToggleCheckGroup(params: {
     isChecked: boolean;
-    groupBuddyList: { group: GroupDetailData; buddyList: UserInfo[] };
+    groupBuddyList: { group: GroupInfoDetail; buddyList: UserInfo[] };
   }) {
     this.toggleCheckGroup.emit(params);
   }
 
   onToggleCheckUser(datas: { checked: boolean; userInfo: UserInfoTypes }[]) {
+    datas.forEach((data) => {
+      data.userInfo = { ...data.userInfo, seq: Number(data.userInfo.seq) };
+    });
     this.toggleCheckUser.emit(datas);
   }
 
diff --git a/src/app/sections/group/dialogs/add-user.dialog.component.html b/src/app/sections/group/dialogs/add-user.dialog.component.html
new file mode 100644
index 0000000..560cd62
--- /dev/null
+++ b/src/app/sections/group/dialogs/add-user.dialog.component.html
@@ -0,0 +1,124 @@
+<div class="dialog-container">
+  <app-layouts-default-dialog
+    [disableClose]="false"
+    (closed)="onClosed($event)"
+    class="create-dialog-container"
+  >
+    <div appLayoutsDefaultDialog="header">
+      {{ 'group:dialog.title.addNewBuddy' | ucapI18n }}
+      <span appLayoutsDefaultDialog="sub-header" class="sub-header-tit">
+        <div *ngIf="currentStep == 0">
+          {{ 'group:dialog.title.subSelectMember' | ucapI18n }}
+        </div>
+        <div *ngIf="currentStep == 1">
+          {{ 'group:dialog.title.subSelectGroup' | ucapI18n }}
+        </div>
+      </span>
+      <button
+        [matMenuTriggerFor]="infoMenu"
+        mat-icon-button
+        color="accent"
+        class="btn-subject-info"
+      >
+        <mat-icon>info_outline</mat-icon>
+      </button>
+    </div>
+
+    <div class="dialog-body" appLayoutsDefaultDialog="body">
+      <div fxFlexFill class="ucap-dialog-app-group-select">
+        <mat-horizontal-stepper
+          [linear]="true"
+          #stepper
+          [selectedIndex]="currentStep"
+        >
+          <mat-step label="Step 1">
+            <div class="ucap-dialog-app-group-select-user" style="width: 100%;">
+              <app-group-select-user
+                #groupSelectUser
+                [isDialog]="true"
+                [checkable]="true"
+                [selectedUserList]="selectedUserList"
+                (toggleCheckUser)="onToggleCheckUser($event)"
+                (toggleCheckGroup)="onToggleCheckGroup($event)"
+              ></app-group-select-user>
+            </div>
+          </mat-step>
+
+          <mat-step label="Step 2">
+            <div class="ucap-dialog-app-group-select-group">
+              <app-sections-select-group
+                [isDialog]="true"
+                [searchable]="false"
+                [checkable]="true"
+                [selectedUserList]="selectedUserList"
+                (toggleCheckUser)="onToggleCheckUser($event)"
+                (toggleCheckGroup)="onToggleCheckForGroupList($event)"
+                (changeGroupName)="onChangeGroupName($event)"
+                class="ucap-dialog-app-group-select-user-list"
+              ></app-sections-select-group>
+            </div>
+          </mat-step>
+        </mat-horizontal-stepper>
+        <div class="ucap-dialog-organization-profile-selection">
+          <ucap-organization-profile-selection-01
+            [userInfoList]="selectedUserList"
+            [removableFor]="removableForSelection"
+            [colorFor]="colorForSelection"
+            (removed)="onRemovedProfileSelection($event)"
+            class="ucap-organization-selected-list"
+          >
+            <ng-template
+              ucapOrganizationProfileSelection01Header
+              class="selected-head-area"
+            >
+              <p>
+                {{ 'group:dialog.selectedMember' | ucapI18n }}
+              </p>
+              <span
+                >(<em class="number">{{ selectedUserList.length }}</em
+                >)</span
+              >
+            </ng-template>
+          </ucap-organization-profile-selection-01>
+        </div>
+      </div>
+    </div>
+    <div appLayoutsDefaultDialog="action" class="btn-box">
+      <button mat-stroked-button (click)="onCancel(stepper)" class="mat-basic">
+        {{ 'group:dialog.btn.cancel' | ucapI18n }}
+      </button>
+      <button
+        mat-flat-button
+        (click)="onConfirm(stepper)"
+        class="bg-primary-darkest"
+        [disabled]="disabledConfirmBtn()"
+      >
+        <span *ngIf="currentStep == 0"
+          >{{ 'group:dialog.btn.compleate' | ucapI18n }}
+        </span>
+        <span *ngIf="currentStep == 1"
+          >{{ 'group:dialog.btn.addBuddyCompleate' | ucapI18n }}
+        </span>
+      </button>
+      <button
+        *ngIf="currentStep < 1"
+        mat-flat-button
+        (click)="onCompleteConfirm(stepper)"
+        class="bg-primary-darkest"
+        [disabled]="disabledCompleateBtn()"
+      >
+        {{ 'group:dialog.btn.selectGroupAndComplete' | ucapI18n }}
+      </button>
+    </div>
+  </app-layouts-default-dialog>
+</div>
+
+<mat-menu #infoMenu="matMenu" class="layer-information-frame">
+  <div class="info-header">
+    <mat-icon>info_outline</mat-icon>
+    <span class="title">그룹 지정 안내</span>
+  </div>
+  <div class="info-body">
+    그룹 미선택 시 선택한 동료는 '기본' 그룹으로 자동 배정됩니다.
+  </div>
+</mat-menu>
diff --git a/src/app/sections/group/dialogs/add-user.dialog.component.scss b/src/app/sections/group/dialogs/add-user.dialog.component.scss
new file mode 100644
index 0000000..90c7e99
--- /dev/null
+++ b/src/app/sections/group/dialogs/add-user.dialog.component.scss
@@ -0,0 +1,75 @@
+@import '~@ucap/lg-scss/mixins';
+.dialog-container {
+  width: 100%;
+  height: 100%;
+
+  .dialog-body {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    .ucap-dialog-app-group-select {
+      position: relative;
+      flex-direction: row;
+      &-user,
+      &-group {
+        width: 100%;
+        height: 100%;
+        background-color: #fff;
+      }
+    }
+
+    /*.ucap-dialog-app-group-select-user {
+      width: 100%;
+      border-bottom: 1px solid #cccccc;
+    }
+    .ucap-dialog-app-group-select-group {
+      width: 60%;
+      border-bottom: 1px solid #cccccc;
+      background-color: #ffffff;
+
+    }*/
+    mat-horizontal-stepper {
+      position: absolute;
+      width: 60%;
+      height: 100%;
+      border-bottom: 1px solid #cccccc;
+      @include screen(xs) {
+        width: 100%;
+        height: 78%;
+        margin-bottom: 2%;
+      }
+    }
+    .ucap-dialog-organization-profile-selection {
+      position: absolute;
+      width: 40%;
+      height: 100%;
+      padding-left: $default-space;
+      border-bottom: 1px solid #cccccc;
+      background-color: #ffffff;
+      right: 0;
+      @include screen(xs) {
+        width: 100%;
+        height: 20%;
+        padding: 0;
+        bottom: 0;
+      }
+      .ucap-organization-selected-list {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        border: 1px solid #cccccc;
+        border-bottom: none;
+        overflow: auto;
+      }
+    }
+  }
+  .btn-box {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    button {
+      margin-left: 4px;
+      border-radius: 3px;
+    }
+  }
+}
diff --git a/src/app/sections/group/dialogs/add-user.dialog.component.spec.ts b/src/app/sections/group/dialogs/add-user.dialog.component.spec.ts
new file mode 100644
index 0000000..7ff5c93
--- /dev/null
+++ b/src/app/sections/group/dialogs/add-user.dialog.component.spec.ts
@@ -0,0 +1,26 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { AddUserDialogComponent } from './add-user.dialog.component';
+
+describe('ucap::ui-organization::CreateChatDialogComponent', () => {
+  let component: AddUserDialogComponent;
+  let fixture: ComponentFixture<AddUserDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [AddUserDialogComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddUserDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/sections/group/dialogs/add-user.dialog.component.ts b/src/app/sections/group/dialogs/add-user.dialog.component.ts
new file mode 100644
index 0000000..0876611
--- /dev/null
+++ b/src/app/sections/group/dialogs/add-user.dialog.component.ts
@@ -0,0 +1,273 @@
+import { Subject } from 'rxjs';
+
+import {
+  Component,
+  OnInit,
+  OnDestroy,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Inject,
+  ViewChild
+} from '@angular/core';
+
+import { Store, select } from '@ngrx/store';
+
+import {
+  MatDialogRef,
+  MAT_DIALOG_DATA,
+  MatDialog
+} from '@angular/material/dialog';
+
+import { UserInfo, UserInfoSS } from '@ucap/domain-organization';
+import { GroupInfoDetail } from '@ucap/domain-group';
+
+import { MatStepper } from '@angular/material/stepper';
+import { I18nService } from '@ucap/ng-i18n';
+
+import {
+  AlertDialogComponent,
+  AlertDialogData,
+  AlertDialogResult
+} from '@ucap/ng-ui/core';
+
+import { AppGroupService } from '@app/services/app-group.service';
+
+import { SelectUserSectionComponent } from '../components/select-user.section.component';
+import { UserInfoTypes } from '@app/types';
+import { GroupSelector } from '@ucap/ng-store-group';
+import { takeUntil } from 'rxjs/operators';
+
+export interface AddUserDialogData {}
+export interface AddUserDialogResult {}
+enum GroupNameType {
+  none = 'NONE',
+  empty = 'EMPTY',
+  exist = 'EXIST'
+}
+@Component({
+  selector: 'app-dialog-group-add-user',
+  templateUrl: './add-user.dialog.component.html',
+  styleUrls: ['./add-user.dialog.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AddUserDialogComponent implements OnInit, OnDestroy {
+  @ViewChild('groupSelectUser', { static: false })
+  groupSelectUser: SelectUserSectionComponent;
+
+  constructor(
+    public dialogRef: MatDialogRef<AddUserDialogData, AddUserDialogResult>,
+    @Inject(MAT_DIALOG_DATA) public data: AddUserDialogData,
+    private changeDetectorRef: ChangeDetectorRef,
+    private store: Store<any>,
+    private i18nService: I18nService,
+    public dialog: MatDialog,
+    private appGroupService: AppGroupService
+  ) {}
+
+  private ngOnDestroySubject: Subject<void> = new Subject();
+  private groupName: string;
+  private defaultGroup: GroupInfoDetail;
+
+  currentStep = 0;
+  isDisable = true;
+
+  selectedUserList: UserInfoTypes[] = [];
+  selectedGroupList: GroupInfoDetail[] = [];
+
+  ngOnInit(): void {
+    this.store
+      .pipe(takeUntil(this.ngOnDestroySubject), select(GroupSelector.groups))
+      .subscribe((groups) => {
+        this.defaultGroup = groups.filter((group) => group.seq === 0)[0];
+      });
+  }
+
+  ngOnDestroy(): void {
+    if (!!this.ngOnDestroySubject) {
+      this.ngOnDestroySubject.next();
+      this.ngOnDestroySubject.complete();
+    }
+  }
+
+  psUpdate() {
+    this.groupSelectUser.psUpdate();
+  }
+
+  onClosed(event: MouseEvent): void {
+    this.dialogRef.close();
+  }
+
+  onCancel(stepper: MatStepper) {
+    if (stepper.selectedIndex > 0) {
+      this.currentStep--;
+      stepper.previous();
+      return;
+    }
+    this.dialogRef.close();
+  }
+  onConfirm(stepper: MatStepper) {
+    let contents: string;
+
+    if (
+      this.currentStep === 1 &&
+      !!this.isDisable &&
+      this.isGroupName() === GroupNameType.exist
+    ) {
+      contents = this.i18nService.t('group:error.invalidGroupName');
+    }
+
+    if (!!this.selectedUserList && this.selectedUserList.length === 0) {
+      contents = this.i18nService.t('group:error.notSelectedUser');
+    }
+
+    if (!!contents && contents.localeCompare('') !== 0) {
+      this.dialog.open<
+        AlertDialogComponent,
+        AlertDialogData,
+        AlertDialogResult
+      >(AlertDialogComponent, {
+        panelClass: 'min-create-dialog',
+        data: {
+          title: this.i18nService.t('group:error.title.default'),
+          html: contents
+        }
+      });
+      return;
+    }
+
+    const userSeqs: string[] = [];
+    this.selectedUserList.map((user) => userSeqs.push(String(user.seq)));
+
+    if (this.currentStep === 1) {
+      if (this.isGroupName() === GroupNameType.exist) {
+        this.appGroupService.createGroup(this.groupName, this.selectedUserList);
+      }
+
+      if (
+        !!this.selectedGroupList &&
+        this.selectedGroupList.length > 0 &&
+        !!this.selectedUserList &&
+        this.selectedUserList.length > 0
+      ) {
+        this.selectedGroupList.map((g) => {
+          this.appGroupService.copyMemberToGroup(g, this.selectedUserList);
+        });
+      } else if (
+        this.isGroupName() !== GroupNameType.exist &&
+        this.selectedUserList.length > 0 &&
+        this.selectedGroupList.length === 0
+      ) {
+        this.appGroupService.addMemberToGroup(
+          this.defaultGroup,
+          this.selectedUserList
+        );
+      }
+    } else {
+      this.appGroupService.addMemberToGroup(
+        this.defaultGroup,
+        this.selectedUserList
+      );
+    }
+
+    this.dialogRef.close();
+  }
+  onCompleteConfirm(stepper: MatStepper) {
+    this.currentStep++;
+    stepper.next();
+  }
+
+  disabledConfirmBtn(): boolean {
+    if (this.currentStep === 0) {
+      return this.disabledCompleateBtn();
+    } else {
+      if (this.selectedUserList.length === 0) {
+        return true;
+      }
+
+      if (!!this.isDisable && this.isGroupName() === GroupNameType.exist) {
+        return true;
+      }
+
+      return false;
+    }
+  }
+
+  disabledCompleateBtn(): boolean {
+    if (!!this.selectedUserList && this.selectedUserList.length > 0) {
+      return false;
+    }
+    return true;
+  }
+  onToggleCheckUser(datas: { checked: boolean; userInfo: UserInfoSS }[]) {
+    const resList = this.appGroupService.getToggleCheckUser(
+      datas,
+      this.selectedUserList
+    );
+
+    if (!resList) {
+      return;
+    }
+
+    this.selectedUserList = resList;
+  }
+
+  onToggleCheckGroup(params: {
+    isChecked: boolean;
+    groupBuddyList: { group: GroupInfoDetail; buddyList: UserInfo[] };
+  }) {
+    const resList = this.appGroupService.getToggleCheckGroup(
+      params,
+      this.selectedUserList
+    );
+
+    if (!resList) {
+      return;
+    }
+
+    this.selectedUserList = resList;
+  }
+
+  onToggleCheckForGroupList(datas: {
+    checked: boolean;
+    group: GroupInfoDetail;
+  }) {
+    this.selectedGroupList = this.appGroupService.getToggleCheckForGroupList(
+      datas,
+      this.selectedGroupList
+    );
+  }
+
+  onChangeGroupName(data: { invalid: boolean; groupName: string }) {
+    this.isDisable = data.invalid;
+    this.groupName = data.groupName;
+  }
+
+  onRemovedProfileSelection(userInfo: UserInfo) {
+    const resUserList = this.appGroupService.removedProfileSelection(
+      userInfo,
+      this.selectedUserList
+    );
+
+    if (!resUserList) {
+    }
+    this.selectedUserList = resUserList;
+  }
+
+  removableForSelection = (userInfo: UserInfo) => {
+    return true;
+  };
+
+  colorForSelection = (userInfo: UserInfo) => {
+    return 'accent';
+  };
+
+  private isGroupName(): GroupNameType {
+    if (!this.groupName) {
+      return GroupNameType.none;
+    } else if (!!this.groupName && this.groupName.trim() === '') {
+      return GroupNameType.empty;
+    }
+
+    return GroupNameType.exist;
+  }
+}
diff --git a/src/app/sections/group/dialogs/create.dialog.component.html b/src/app/sections/group/dialogs/create.dialog.component.html
index d78d2ac..3cf8dd9 100644
--- a/src/app/sections/group/dialogs/create.dialog.component.html
+++ b/src/app/sections/group/dialogs/create.dialog.component.html
@@ -6,14 +6,14 @@
   >
     <div appLayoutsDefaultDialog="header">
       {{ 'group:dialog.title.createGroup' | ucapI18n }}
-      <div appLayoutsDefaultDialog="sub-header" class="sub-header-tit">
+      <span appLayoutsDefaultDialog="sub-header" class="sub-header-tit">
         <div *ngIf="currentStep == 0">
-          {{ 'group:dialog.title.subTitleGroupInfo' | ucapI18n }}
+          {{ 'group:dialog.title.subGroupInfo' | ucapI18n }}
         </div>
         <div *ngIf="currentStep == 1">
-          {{ 'group:dialog.title.subTitleSelectMember' | ucapI18n }}
+          {{ 'group:dialog.title.subSelectMember' | ucapI18n }}
         </div>
-      </div>
+      </span>
     </div>
 
     <div class="dialog-body" appLayoutsDefaultDialog="body">
@@ -38,8 +38,8 @@
               [isDialog]="true"
               [checkable]="true"
               [selectedUserList]="selectedUserList"
-              (toggleCheckUser)="onChangeUserList($event)"
-              (toggleCheckGroup)="onChangeGroupList($event)"
+              (toggleCheckUser)="onToggleCheckUser($event)"
+              (toggleCheckGroup)="onToggleCheckGroup($event)"
             ></app-group-select-user>
           </div>
           <div class="ucap-dialog-organization-profile-selection">
@@ -72,7 +72,7 @@
         {{ 'group:dialog.btn.cancel' | ucapI18n }}
       </button>
       <button
-        mat-button
+        mat-flat-button
         (click)="onConfirm(stepper)"
         class="bg-primary-darkest"
       >
diff --git a/src/app/sections/group/dialogs/create.dialog.component.ts b/src/app/sections/group/dialogs/create.dialog.component.ts
index bbd3ebf..d0eb984 100644
--- a/src/app/sections/group/dialogs/create.dialog.component.ts
+++ b/src/app/sections/group/dialogs/create.dialog.component.ts
@@ -1,4 +1,5 @@
 import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 import {
   Component,
@@ -10,39 +11,34 @@ import {
   Input,
   ViewChild
 } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
 import { Store, select } from '@ngrx/store';
 
+import { MatStepper } from '@angular/material/stepper';
+
 import {
   MatDialogRef,
   MAT_DIALOG_DATA,
   MatDialog
 } from '@angular/material/dialog';
 
-import { UserInfo, GroupDetailData } from '@ucap/protocol-sync';
-import { UserInfoSS, UserInfoF, UserInfoDN } from '@ucap/protocol-query';
-import { UserInfo as RoomUserInfo } from '@ucap/protocol-room';
-import { MatStepper } from '@angular/material/stepper';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UserInfo, UserInfoSS } from '@ucap/domain-organization';
+import { GroupInfoDetail } from '@ucap/domain-group';
+
 import { I18nService } from '@ucap/ng-i18n';
-import { GroupActions, GroupSelector } from '@ucap/ng-store-group';
+import { GroupSelector } from '@ucap/ng-store-group';
 import {
   AlertDialogComponent,
   AlertDialogData,
   AlertDialogResult
-} from '@ucap/ng-ui';
-import { takeUntil } from 'rxjs/operators';
+} from '@ucap/ng-ui/core';
+
 import { AppGroupService } from '@app/services/app-group.service';
+import { UserInfoTypes } from '@app/types';
 
 import { SelectUserSectionComponent } from '../components/select-user.section.component';
 
-export type UserInfoTypes =
-  | UserInfo
-  | UserInfoSS
-  | UserInfoF
-  | UserInfoDN
-  | RoomUserInfo;
-
 export interface CreateDialogData {
   title: string;
 }
@@ -69,9 +65,9 @@ export class CreateDialogComponent implements OnInit, OnDestroy {
     private appGroupService: AppGroupService
   ) {}
 
-  private ngOnDestroySubject: Subject<void>;
+  private ngOnDestroySubject: Subject<void> = new Subject();
   private groupName: string;
-  private defaultGroup: GroupDetailData;
+  private defaultGroup: GroupInfoDetail;
 
   currentStep = 0;
   isDisable = true;
@@ -79,7 +75,6 @@ export class CreateDialogComponent implements OnInit, OnDestroy {
   selectedUserList: UserInfoTypes[] = [];
 
   ngOnInit(): void {
-    this.ngOnDestroySubject = new Subject();
     this.store
       .pipe(takeUntil(this.ngOnDestroySubject), select(GroupSelector.groups))
       .subscribe((groups) => {
@@ -110,26 +105,28 @@ export class CreateDialogComponent implements OnInit, OnDestroy {
     let contents: string;
     let isDefaultGroup = false;
 
-    if (this.currentStep === 0) {
-      if (
-        !this.groupName ||
-        this.groupName.localeCompare('') === 0 ||
-        this.groupName.trim().localeCompare('') === 0
-      ) {
-        contents = this.i18nService.t('group:error.requireGroupName');
-      } else if (this.isDisable) {
-        contents = this.i18nService.t('group:error.invalidGroupName');
-      }
+    if (
+      !this.groupName ||
+      this.groupName.localeCompare('') === 0 ||
+      this.groupName.trim().localeCompare('') === 0
+    ) {
+      contents = this.i18nService.t('group:error.requireGroupName');
     } else {
-      if (
-        !this.groupName ||
-        this.groupName.localeCompare('') === 0 ||
-        this.groupName.trim().localeCompare('') === 0
-      ) {
-        isDefaultGroup = true;
-      }
-      if (!!this.selectedUserList && this.selectedUserList.length === 0) {
-        contents = this.i18nService.t('group:error.notSelectedUser');
+      if (this.currentStep === 0) {
+        if (this.isDisable) {
+          contents = this.i18nService.t('group:error.invalidGroupName');
+        }
+      } else {
+        if (
+          !this.groupName ||
+          this.groupName.localeCompare('') === 0 ||
+          this.groupName.trim().localeCompare('') === 0
+        ) {
+          isDefaultGroup = true;
+        }
+        if (!!this.selectedUserList && this.selectedUserList.length === 0) {
+          contents = this.i18nService.t('group:error.notSelectedUser');
+        }
       }
     }
 
@@ -181,96 +178,48 @@ export class CreateDialogComponent implements OnInit, OnDestroy {
 
     return false;
   }
-  onChangeUserList(datas: { checked: boolean; userInfo: UserInfoSS }[]) {
-    if (!datas || 0 === datas.length) {
-      return;
-    }
-
-    const pushs: UserInfoSS[] = [];
-    const pops: UserInfoSS[] = [];
-
-    datas.forEach((d) => {
-      const i = this.selectedUserList.findIndex(
-        (u) => String(u.seq) === String(d.userInfo.seq)
-      );
-      if (d.checked) {
-        if (-1 === i) {
-          pushs.push(d.userInfo);
-        }
-      } else {
-        if (-1 < i) {
-          pops.push(d.userInfo);
-        }
-      }
-    });
-
-    if (0 < pushs.length) {
-      this.selectedUserList = [...this.selectedUserList, ...pushs];
-    }
-
-    if (0 < pops.length) {
-      this.selectedUserList = this.selectedUserList.filter(
-        (u) => -1 === pops.findIndex((p) => String(p.seq) === String(u.seq))
-      );
-    }
-  }
-
-  // onChangeUserList(data: { checked: boolean; userInfo: UserInfoSS }) {
-  //   const i = this.selectedUserList.findIndex(
-  //     (u) => u.seq === data.userInfo.seq
-  //   );
-
-  //   if (data.checked) {
-  //     if (-1 === i) {
-  //       this.selectedUserList = [...this.selectedUserList, data.userInfo];
-  //     }
-  //   } else {
-  //     if (-1 < i) {
-  //       this.selectedUserList = this.selectedUserList.filter(
-  //         (u) => u.seq !== data.userInfo.seq
-  //       );
-  //     }
-  //   }
-  // }
 
   onChangeGroupName(data: { invalid: boolean; groupName: string }) {
     this.isDisable = data.invalid;
     this.groupName = data.groupName;
   }
-  onChangeGroupList(params: {
-    isChecked: boolean;
-    groupBuddyList: { group: GroupDetailData; buddyList: UserInfo[] };
-  }) {
-    if (params.isChecked) {
-      params.groupBuddyList.buddyList.forEach((item) => {
-        if (
-          this.selectedUserList.filter(
-            (user) => String(user.seq) === String(item.seq)
-          ).length === 0
-        ) {
-          this.selectedUserList = [...this.selectedUserList, item];
-        }
-      });
-    } else {
-      this.selectedUserList = this.selectedUserList.filter(
-        (item) =>
-          params.groupBuddyList.buddyList.filter(
-            (del) => String(del.seq) === String(item.seq)
-          ).length === 0
-      );
+
+  onToggleCheckUser(datas: { checked: boolean; userInfo: UserInfoSS }[]) {
+    const resList = this.appGroupService.getToggleCheckUser(
+      datas,
+      this.selectedUserList
+    );
+
+    if (!resList) {
+      return;
     }
+    this.selectedUserList = resList;
+  }
+
+  onToggleCheckGroup(params: {
+    isChecked: boolean;
+    groupBuddyList: { group: GroupInfoDetail; buddyList: UserInfo[] };
+  }) {
+    const resList = this.appGroupService.getToggleCheckGroup(
+      params,
+      this.selectedUserList
+    );
+
+    if (!resList) {
+      return;
+    }
+    this.selectedUserList = resList;
   }
 
   onRemovedProfileSelection(userInfo: UserInfo) {
-    const i = this.selectedUserList.findIndex(
-      (u) => String(u.seq) === String(userInfo.seq)
+    const resUserList = this.appGroupService.removedProfileSelection(
+      userInfo,
+      this.selectedUserList
     );
 
-    if (-1 < i) {
-      this.selectedUserList = this.selectedUserList.filter(
-        (u) => String(u.seq) !== String(userInfo.seq)
-      );
+    if (!resUserList) {
     }
+    this.selectedUserList = resUserList;
   }
 
   removableForSelection = (userInfo: UserInfo) => {
diff --git a/src/app/sections/group/dialogs/edit-inline-input.dialog.component.html b/src/app/sections/group/dialogs/edit-inline-input.dialog.component.html
index bbfab18..1bdbd8b 100644
--- a/src/app/sections/group/dialogs/edit-inline-input.dialog.component.html
+++ b/src/app/sections/group/dialogs/edit-inline-input.dialog.component.html
@@ -18,7 +18,10 @@
         (click)="$event.stopPropagation()"
         (keydown.enter)="$event.stopPropagation(); onApply(inlineInput.value)"
       />
-      <mat-hint *ngIf="inlineInput.value !== ''" align="end"
+      <mat-hint
+        *ngIf="inlineInput.value !== ''"
+        align="end"
+        class="edit-input-length"
         >{{ inlineInput.value?.length || 0 }}/{{ data.maxLength }}</mat-hint
       >
     </span>
diff --git a/src/app/sections/group/dialogs/edit-inline-input.dialog.component.scss b/src/app/sections/group/dialogs/edit-inline-input.dialog.component.scss
index d31c34a..9ff75b6 100644
--- a/src/app/sections/group/dialogs/edit-inline-input.dialog.component.scss
+++ b/src/app/sections/group/dialogs/edit-inline-input.dialog.component.scss
@@ -1,7 +1,7 @@
 .dialog-container {
   width: 100%;
   height: 100%;
-  overflow: hidden;
+  // overflow: hidden;
   border-bottom: 1px solid #999;
   padding-left: 10px;
   .ng-star-inserted {
@@ -16,5 +16,13 @@
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
+    height: 20px;
+    span {
+      .edit-input-length {
+        position: absolute;
+        bottom: -22px;
+        right: 20px;
+      }
+    }
   }
 }
diff --git a/src/app/sections/group/dialogs/edit-inline-input.dialog.component.ts b/src/app/sections/group/dialogs/edit-inline-input.dialog.component.ts
index 63308f7..4f45927 100644
--- a/src/app/sections/group/dialogs/edit-inline-input.dialog.component.ts
+++ b/src/app/sections/group/dialogs/edit-inline-input.dialog.component.ts
@@ -1,4 +1,5 @@
 import { Subject, of } from 'rxjs';
+import { take, map, catchError, takeUntil } from 'rxjs/operators';
 
 import {
   Component,
@@ -19,15 +20,16 @@ import {
 
 import { I18nService } from '@ucap/ng-i18n';
 
+import { GroupInfoDetail } from '@ucap/domain-group';
+
 import {
   AlertDialogComponent,
   AlertDialogData,
   AlertDialogResult
-} from '@ucap/ng-ui';
-import { take, map, catchError, takeUntil } from 'rxjs/operators';
-import { AppService } from '@app/services/app.service';
+} from '@ucap/ng-ui/core';
 import { GroupSelector } from '@ucap/ng-store-group';
-import { GroupDetailData } from '@ucap/protocol-sync';
+
+import { AppGroupService } from '@app/services/app-group.service';
 
 export interface EditInlineInputDialogData {
   type: string;
@@ -59,11 +61,11 @@ export class EditInlineInputDialogComponent implements OnInit, OnDestroy {
     private store: Store<any>,
     private i18nService: I18nService,
     public dialog: MatDialog,
-    private appService: AppService
+    private appGroupService: AppGroupService
   ) {}
 
   private ngOnDestroySubject: Subject<void>;
-  groupList: GroupDetailData[] = [];
+  groupList: GroupInfoDetail[] = [];
 
   ngOnInit(): void {
     const matDialogConfig: MatDialogConfig = new MatDialogConfig();
@@ -105,7 +107,7 @@ export class EditInlineInputDialogComponent implements OnInit, OnDestroy {
 
   onApply(inputValue: string) {
     if (!!this.data && this.data.type.localeCompare('GROUP_NAME') === 0) {
-      const errMsg = this.appService.validateGroupName(
+      const errMsg = this.appGroupService.validateGroupName(
         inputValue,
         this.groupList
       );
diff --git a/src/app/sections/group/dialogs/edit-user.dialog.component.html b/src/app/sections/group/dialogs/edit-user.dialog.component.html
index 339ac64..60b31d5 100644
--- a/src/app/sections/group/dialogs/edit-user.dialog.component.html
+++ b/src/app/sections/group/dialogs/edit-user.dialog.component.html
@@ -11,13 +11,13 @@
       <div class="edit-user-dialog-content">
         <div class="ucap-dialog-app-group-select-user">
           <app-sections-select-group
-            [isMemberMove]="data.type"
             [isDialog]="true"
             [checkable]="true"
+            [searchable]="false"
             [curGroup]="data.group"
             [selectedUserList]="selectedUserList"
-            (changeUserList)="onChangeSelectedUserList($event)"
-            (changeGroupList)="onChangeGroupList($event)"
+            (toggleCheckUser)="onToggleCheckUser($event)"
+            (toggleCheckGroup)="onToggleCheckGroup($event)"
             (changeGroupName)="onChangeGroupName($event)"
             class="ucap-dialog-app-group-select-user-list"
           ></app-sections-select-group>
diff --git a/src/app/sections/group/dialogs/edit-user.dialog.component.ts b/src/app/sections/group/dialogs/edit-user.dialog.component.ts
index e370a97..62f5899 100644
--- a/src/app/sections/group/dialogs/edit-user.dialog.component.ts
+++ b/src/app/sections/group/dialogs/edit-user.dialog.component.ts
@@ -18,29 +18,31 @@ import {
   MatDialog
 } from '@angular/material/dialog';
 
-import { UserInfo, GroupDetailData } from '@ucap/protocol-sync';
-import { UserInfoSS, UserInfoF, UserInfoDN } from '@ucap/protocol-query';
-import { UserInfo as RoomUserInfo } from '@ucap/protocol-room';
+import { UserInfo, UserInfoSS } from '@ucap/domain-organization';
+import { GroupInfoDetail } from '@ucap/domain-group';
+
 import { I18nService } from '@ucap/ng-i18n';
 
 import { SelectUserDialogType, GroupManageType } from '@app/types';
 
 import { UserInfoTypes } from '@app/types';
-import { AppService } from '@app/services/app.service';
+
 import { takeUntil } from 'rxjs/operators';
 import { GroupSelector } from '@ucap/ng-store-group';
+import { AppGroupService } from '@app/services/app-group.service';
+// import { LogService } from '@ucap/logger';
 export interface EditUserDialogData {
   title: string;
   type: GroupManageType;
-  group?: GroupDetailData;
+  group?: GroupInfoDetail;
   userInfos: UserInfoTypes[];
 }
 export interface EditUserDialogResult {
   type: GroupManageType;
   groupName: string;
-  group: GroupDetailData;
+  group: GroupInfoDetail;
   selelctUserList?: UserInfoTypes[];
-  selectGroupList?: GroupDetailData[];
+  selectGroupList?: GroupInfoDetail[];
 }
 
 @Component({
@@ -53,7 +55,8 @@ export class EditUserDialogComponent implements OnInit, OnDestroy {
   constructor(
     public dialogRef: MatDialogRef<EditUserDialogData, EditUserDialogResult>,
     @Inject(MAT_DIALOG_DATA) public data: EditUserDialogData,
-    private appService: AppService,
+    private appGroupService: AppGroupService,
+    // private logService: LogService,
     private changeDetectorRef: ChangeDetectorRef,
     private store: Store<any>,
     private i18nService: I18nService,
@@ -62,16 +65,14 @@ export class EditUserDialogComponent implements OnInit, OnDestroy {
 
   private ngOnDestroySubject: Subject<void> = new Subject();
 
-  currentManageType: GroupManageType;
   selectedUserList: UserInfoTypes[] = [];
-  selectedGroupList: GroupDetailData[] = [];
-  groupName = '';
+  selectedGroupList: GroupInfoDetail[] = [];
+  groupName: string;
   SelectUserDialogType = SelectUserDialogType;
-  groupList: GroupDetailData[] = [];
+  groupList: GroupInfoDetail[] = [];
 
   ngOnInit(): void {
     this.selectedUserList = [...this.data.userInfos];
-    this.currentManageType = this.data.type;
 
     this.store
       .pipe(takeUntil(this.ngOnDestroySubject), select(GroupSelector.groups))
@@ -92,14 +93,8 @@ export class EditUserDialogComponent implements OnInit, OnDestroy {
   }
 
   onConfirm() {
-    if (!!this.groupName && this.groupName.trim().localeCompare('') !== 0) {
-      this.currentManageType = GroupManageType.Create;
-    } else {
-      this.groupName = undefined;
-    }
-
     this.dialogRef.close({
-      type: this.currentManageType,
+      type: this.data.type,
       groupName: this.groupName,
       group: this.data.group,
       selelctUserList: this.selectedUserList,
@@ -107,61 +102,29 @@ export class EditUserDialogComponent implements OnInit, OnDestroy {
     });
   }
 
-  onChangeSelectedUserList(
+  onToggleCheckUser(
     datas: {
       checked: boolean;
       userInfo: UserInfoSS;
     }[]
   ) {
-    if (!datas || 0 === datas.length) {
+    const resList = this.appGroupService.getToggleCheckUser(
+      datas,
+      this.selectedUserList
+    );
+
+    if (!resList) {
       return;
     }
 
-    const pushs: UserInfoSS[] = [];
-    const pops: UserInfoSS[] = [];
-
-    datas.forEach((d) => {
-      const i = this.selectedUserList.findIndex(
-        (u) => u.seq === d.userInfo.seq
-      );
-      if (d.checked) {
-        if (-1 === i) {
-          pushs.push(d.userInfo);
-        }
-      } else {
-        if (-1 < i) {
-          pops.push(d.userInfo);
-        }
-      }
-    });
-
-    if (0 < pushs.length) {
-      this.selectedUserList = [...this.selectedUserList, ...pushs];
-    }
-
-    if (0 < pops.length) {
-      this.selectedUserList = this.selectedUserList.filter(
-        (u) => -1 === pops.findIndex((p) => p.seq === u.seq)
-      );
-    }
+    this.selectedUserList = resList;
   }
 
-  onChangeGroupList(data: { checked: boolean; group: GroupDetailData }) {
-    const i = this.selectedGroupList.findIndex(
-      (u) => String(u.seq) === String(data.group.seq)
+  onToggleCheckGroup(data: { checked: boolean; group: GroupInfoDetail }) {
+    this.selectedGroupList = this.appGroupService.getToggleCheckForGroupList(
+      data,
+      this.selectedGroupList
     );
-
-    if (data.checked) {
-      if (-1 === i) {
-        this.selectedGroupList = [...this.selectedGroupList, data.group];
-      }
-    } else {
-      if (-1 < i) {
-        this.selectedGroupList = this.selectedGroupList.filter(
-          (u) => String(u.seq) !== String(data.group.seq)
-        );
-      }
-    }
   }
 
   onChangeGroupName(data: { invalid: boolean; groupName: string }) {
@@ -169,7 +132,7 @@ export class EditUserDialogComponent implements OnInit, OnDestroy {
   }
 
   checkDisableBtn(): boolean {
-    const errMsg = this.appService.validateGroupName(
+    const errMsg = this.appGroupService.validateGroupName(
       this.groupName,
       this.groupList
     );
@@ -195,31 +158,22 @@ export class EditUserDialogComponent implements OnInit, OnDestroy {
   }
 
   onRemovedProfileSelection(userInfo: UserInfo) {
-    // if (userInfo.seq === this.data.userInfo.seq) {
-    //   return;
-    // }
-    const i = this.selectedUserList.findIndex(
-      (u) => String(u.seq) === String(userInfo.seq)
+    const resList = this.appGroupService.removedProfileSelection(
+      userInfo,
+      this.selectedUserList
     );
-
-    if (-1 < i) {
-      this.selectedUserList = this.selectedUserList.filter(
-        (u) => String(u.seq) !== String(userInfo.seq)
-      );
+    if (!resList) {
+      // this.logService.error('onRemovedProfileSelection', 'null');
     }
+
+    this.selectedUserList = resList;
   }
 
   removableForSelection = (userInfo: UserInfo) => {
-    // if (String(userInfo.seq) === String(this.data.userInfo.seq)) {
-    //   return false;
-    // }
     return true;
   };
 
   colorForSelection = (userInfo: UserInfo) => {
-    // if (String(userInfo.seq) === String(this.data.userInfo.seq)) {
-    //   return 'primary';
-    // }
     return 'accent';
   };
 }
diff --git a/src/app/sections/group/dialogs/index.ts b/src/app/sections/group/dialogs/index.ts
index 449db10..eb2d48b 100644
--- a/src/app/sections/group/dialogs/index.ts
+++ b/src/app/sections/group/dialogs/index.ts
@@ -2,10 +2,12 @@ import { CreateDialogComponent } from './create.dialog.component';
 import { EditInlineInputDialogComponent } from './edit-inline-input.dialog.component';
 import { ManageDialogComponent } from './manage.dialog.component';
 import { EditUserDialogComponent } from './edit-user.dialog.component';
+import { AddUserDialogComponent } from './add-user.dialog.component';
 
 export const DIALOGS = [
   CreateDialogComponent,
   EditInlineInputDialogComponent,
   ManageDialogComponent,
-  EditUserDialogComponent
+  EditUserDialogComponent,
+  AddUserDialogComponent
 ];
diff --git a/src/app/sections/group/dialogs/manage.dialog.component.html b/src/app/sections/group/dialogs/manage.dialog.component.html
index 33a28ff..6b3e88c 100644
--- a/src/app/sections/group/dialogs/manage.dialog.component.html
+++ b/src/app/sections/group/dialogs/manage.dialog.component.html
@@ -15,8 +15,8 @@
           [checkable]="true"
           [selectedUserList]="selectedUserList"
           [selectedGroupHeader]="data.groupBuddyList.group"
-          (toggleCheckUser)="onChangeSelectedUserList($event)"
-          (toggleCheckGroup)="onSelectBySectionUserGroup($event)"
+          (toggleCheckUser)="onToggleCheckUser($event)"
+          (toggleCheckGroup)="onToggleCheckGroup($event)"
         ></app-group-select-user>
       </div>
       <div class="ucap-dialog-organization-profile-selection">
diff --git a/src/app/sections/group/dialogs/manage.dialog.component.ts b/src/app/sections/group/dialogs/manage.dialog.component.ts
index 53e7dbd..dd1059c 100644
--- a/src/app/sections/group/dialogs/manage.dialog.component.ts
+++ b/src/app/sections/group/dialogs/manage.dialog.component.ts
@@ -20,31 +20,24 @@ import {
   MatDialog
 } from '@angular/material/dialog';
 
-import { UserInfo, GroupDetailData } from '@ucap/protocol-sync';
-import { UserInfoSS, UserInfoF, UserInfoDN } from '@ucap/protocol-query';
-import { UserInfo as RoomUserInfo } from '@ucap/protocol-room';
+import { UserInfo, UserInfoSS } from '@ucap/domain-organization';
+import { GroupInfoDetail } from '@ucap/domain-group';
 
 import { I18nService } from '@ucap/ng-i18n';
 
-import { GroupManageType } from '@app/types';
+import { UserInfoTypes } from '@app/types';
 import { LogService } from '@ucap/ng-logger';
 import { SelectUserSectionComponent } from '../components/select-user.section.component';
-import { DefaultDialogLayoutComponent } from '@app/layouts/components/default-dialog.layout.component';
 
-export type UserInfoTypes =
-  | UserInfo
-  | UserInfoSS
-  | UserInfoF
-  | UserInfoDN
-  | RoomUserInfo;
+import { AppGroupService } from '@app/services/app-group.service';
 
 export interface ManageDialogData {
   title: string;
-  groupBuddyList?: { group: GroupDetailData; buddyList: UserInfo[] };
+  groupBuddyList?: { group: GroupInfoDetail; buddyList: UserInfo[] };
 }
 export interface ManageDialogResult {
   choice: boolean;
-  group?: GroupDetailData;
+  group?: GroupInfoDetail;
   selelctUserList?: UserInfoTypes[];
 }
 
@@ -61,7 +54,8 @@ export class ManageDialogComponent implements OnInit, OnDestroy, AfterViewInit {
     private changeDetectorRef: ChangeDetectorRef,
     private i18nService: I18nService,
     public dialog: MatDialog,
-    private logService: LogService
+    private logService: LogService,
+    private appGroupService: AppGroupService
   ) {}
 
   @ViewChild('dialogContainer', { static: true, read: ViewContainerRef })
@@ -72,10 +66,8 @@ export class ManageDialogComponent implements OnInit, OnDestroy, AfterViewInit {
 
   private ngOnDestroySubject: Subject<void> = new Subject();
 
-  GroupManageType = GroupManageType;
-
   selectedUserList: UserInfoTypes[] = [];
-  selectedGroupList: GroupDetailData[] = [];
+  selectedGroupList: GroupInfoDetail[] = [];
 
   ngOnInit(): void {
     this.selectedUserList = this.data.groupBuddyList.buddyList;
@@ -99,81 +91,37 @@ export class ManageDialogComponent implements OnInit, OnDestroy, AfterViewInit {
   psUpdate() {
     this.appGroupSelectUser.psUpdate();
   }
-  onSelectBySectionGroup(data: { checked: boolean; group: GroupDetailData }) {
-    const i = this.selectedGroupList.findIndex((u) => u.seq === data.group.seq);
 
-    if (data.checked) {
-      if (-1 === i) {
-        this.selectedGroupList = [...this.selectedGroupList, data.group];
-      }
-    } else {
-      if (-1 < i) {
-        this.selectedGroupList = this.selectedGroupList.filter(
-          (u) => u.seq !== data.group.seq
-        );
-      }
-    }
-  }
-
-  onSelectBySectionUserGroup(params: {
+  onToggleCheckGroup(params: {
     isChecked: boolean;
-    groupBuddyList: { group: GroupDetailData; buddyList: UserInfo[] };
+    groupBuddyList: { group: GroupInfoDetail; buddyList: UserInfo[] };
   }) {
-    if (params.isChecked) {
-      params.groupBuddyList.buddyList.forEach((item) => {
-        if (
-          this.selectedUserList.filter((user) => user.seq === item.seq)
-            .length === 0
-        ) {
-          this.selectedUserList = [...this.selectedUserList, item];
-        }
-      });
-    } else {
-      this.selectedUserList = this.selectedUserList.filter(
-        (item) =>
-          params.groupBuddyList.buddyList.filter((del) => del.seq === item.seq)
-            .length === 0
-      );
+    const resList = this.appGroupService.getToggleCheckGroup(
+      params,
+      this.selectedUserList
+    );
+
+    if (!resList) {
+      return;
     }
+    this.selectedUserList = resList;
   }
 
-  onChangeSelectedUserList(
+  onToggleCheckUser(
     datas: {
       checked: boolean;
       userInfo: UserInfoSS;
     }[]
   ) {
-    if (!datas || 0 === datas.length) {
+    const resList = this.appGroupService.getToggleCheckUser(
+      datas,
+      this.selectedUserList
+    );
+
+    if (!resList) {
       return;
     }
-
-    const pushs: UserInfoSS[] = [];
-    const pops: UserInfoSS[] = [];
-
-    datas.forEach((d) => {
-      const i = this.selectedUserList.findIndex(
-        (u) => u.seq === d.userInfo.seq
-      );
-      if (d.checked) {
-        if (-1 === i) {
-          pushs.push(d.userInfo);
-        }
-      } else {
-        if (-1 < i) {
-          pops.push(d.userInfo);
-        }
-      }
-    });
-
-    if (0 < pushs.length) {
-      this.selectedUserList = [...this.selectedUserList, ...pushs];
-    }
-
-    if (0 < pops.length) {
-      this.selectedUserList = this.selectedUserList.filter(
-        (u) => -1 === pops.findIndex((p) => p.seq === u.seq)
-      );
-    }
+    this.selectedUserList = resList;
   }
   onCancel(event: MouseEvent) {
     this.dialogRef.close({ choice: false });
@@ -182,8 +130,7 @@ export class ManageDialogComponent implements OnInit, OnDestroy, AfterViewInit {
     this.dialogRef.close({
       choice: true,
       group: {
-        ...this.data.groupBuddyList.group,
-        userSeqs: []
+        ...this.data.groupBuddyList.group
       },
       selelctUserList: this.selectedUserList
     });
@@ -220,19 +167,18 @@ export class ManageDialogComponent implements OnInit, OnDestroy, AfterViewInit {
   }
 
   onToggleCheck(data: { checked: boolean; userInfo: UserInfoSS }) {
-    this.onChangeSelectedUserList([data]);
+    this.onToggleCheckUser([data]);
   }
 
   onRemovedProfileSelection(userInfo: UserInfo) {
-    const i = this.selectedUserList.findIndex(
-      (u) => String(u.seq) === String(userInfo.seq)
+    const resUserList = this.appGroupService.removedProfileSelection(
+      userInfo,
+      this.selectedUserList
     );
 
-    if (-1 < i) {
-      this.selectedUserList = this.selectedUserList.filter(
-        (u) => String(u.seq) !== String(userInfo.seq)
-      );
+    if (!resUserList) {
     }
+    this.selectedUserList = resUserList;
   }
 
   removableForSelection = (userInfo: UserInfo) => {
diff --git a/src/app/sections/group/group.section.module.ts b/src/app/sections/group/group.section.module.ts
index 7767d8b..a9a3b3d 100644
--- a/src/app/sections/group/group.section.module.ts
+++ b/src/app/sections/group/group.section.module.ts
@@ -20,7 +20,8 @@ import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 
 import { I18nModule, UCAP_I18N_NAMESPACE } from '@ucap/ng-i18n';
 
-import { UiModule } from '@ucap/ng-ui';
+import { UiInputModule } from '@ucap/ng-ui/input';
+
 import { OrganizationUiModule } from '@ucap/ng-ui-organization';
 import { ChatUiModule } from '@ucap/ng-ui-chat';
 
@@ -50,8 +51,11 @@ import { AppChatModule } from '@app/ucap/chat/chat.module';
     MatStepperModule,
     MatMenuModule,
     PerfectScrollbarModule,
+
     I18nModule,
-    UiModule,
+
+    UiInputModule,
+
     OrganizationUiModule,
     ChatUiModule,
 
diff --git a/src/app/sections/organization/components/member-list.component.html b/src/app/sections/organization/components/member-list.component.html
index b4b2907..e23e53f 100644
--- a/src/app/sections/organization/components/member-list.component.html
+++ b/src/app/sections/organization/components/member-list.component.html
@@ -55,7 +55,7 @@
         (searched)="onSearchedProfileList($event)"
         (changedCheck)="onChangedCheckProfileList($event)"
         (openProfile)="onOpenProfile($event)"
-        (floatingProfileMenu)="onFloatingProfileMenu($event)"
+        (clickProfileMenu)="onClickProfileMenu($event)"
       >
       </app-organization-profile-list>
     </div>
@@ -158,9 +158,10 @@
               [disabled]="
                 !selectedUserInfos ||
                 selectedUserInfos.length === 0 ||
-                !authRes ||
-                (!!authRes && !authRes.canVideoConference)
+                !userPermission ||
+                (!!userPermission && !userPermission.canVideoConference)
               "
+              (click)="openVideoConference()"
             >
               {{ 'organization:label.videoConference' | ucapI18n }}
             </button>
diff --git a/src/app/sections/organization/components/member-list.component.scss b/src/app/sections/organization/components/member-list.component.scss
index 82c939c..d8f94ef 100644
--- a/src/app/sections/organization/components/member-list.component.scss
+++ b/src/app/sections/organization/components/member-list.component.scss
@@ -14,8 +14,8 @@
   .list-header {
     justify-content: space-between;
     align-items: center;
-    border-bottom: 2px solid #999999;
-    padding: 12px 16px 13px 0;
+    border-bottom: 1px solid #999999;
+    padding: 12px 16px 12px 0;
 
     .list-header-title {
       @include screen(xs) {
diff --git a/src/app/sections/organization/components/member-list.component.ts b/src/app/sections/organization/components/member-list.component.ts
index acfb740..18c3797 100644
--- a/src/app/sections/organization/components/member-list.component.ts
+++ b/src/app/sections/organization/components/member-list.component.ts
@@ -18,11 +18,14 @@ import { MatDialog } from '@angular/material/dialog';
 
 import { select, Store } from '@ngrx/store';
 
-import { SortOrder } from '@ucap/core';
-import { Company } from '@ucap/api-external';
-import { DeptInfo, UserInfoSS, AuthResponse } from '@ucap/protocol-query';
-import { UserInfo } from '@ucap/protocol-sync';
-import { User } from '@ucap/protocol-info';
+import { SortOrder } from '@ucap/domain-common';
+import {
+  DeptInfo,
+  User,
+  UserInfo,
+  UserInfoSS,
+  Company
+} from '@ucap/domain-organization';
 
 import { LogService } from '@ucap/ng-logger';
 import { I18nService } from '@ucap/ng-i18n';
@@ -32,13 +35,16 @@ import {
   CompanySelector,
   UserSelector
 } from '@ucap/ng-store-organization';
-import { AuthorizationSelector } from '@ucap/ng-store-authentication';
+import {
+  AuthorizationSelector,
+  LoginSelector
+} from '@ucap/ng-store-authentication';
 
 import {
   AlertDialogComponent,
   AlertDialogData,
   AlertDialogResult
-} from '@ucap/ng-ui';
+} from '@ucap/ng-ui/core';
 
 import { SearchData } from '@app/ucap/organization/models/search-data';
 import { ProfileListComponent as AppProfileListComponent } from '@app/ucap/organization/components/profile-list.component';
@@ -55,7 +61,12 @@ import {
   ProfileDialogResult
 } from '../dialogs/profile.dialog.component';
 
-import { environment } from '@environments';
+import { ProfileMenuType } from '@ucap/ng-ui-organization';
+import { ConferenceCreateRequest } from '@ucap/api-prompt';
+
+import { AppAuthenticationService } from '@app/services/app-authentication.service';
+import { LoginInfo } from '@ucap/domain-authentication';
+import { UserPermission } from '@ucap/domain-authorization';
 
 @Component({
   selector: 'app-sections-organization-member-list',
@@ -79,8 +90,8 @@ export class MemberListComponent implements OnInit, OnDestroy {
     if (!!searchData && !searchData.bySearch && !!searchData.deptSeq) {
       this.setDeptInfo(searchData.deptSeq);
     } else {
-      // if (!!this.loginRes) {
-      //   this.setDeptInfo(this.loginRes.departmentCode + '');
+      // if (!!this.loginInfo) {
+      //   this.setDeptInfo(this.loginInfo.departmentCode + '');
       // }
       // this.setCompanyInfo(searchData.companyCode);
     }
@@ -105,7 +116,8 @@ export class MemberListComponent implements OnInit, OnDestroy {
   selectedUserInfos: UserInfoSS[] = [];
   isExpanded = false;
   isAllCheck = false;
-  authRes: AuthResponse;
+  userPermission: UserPermission;
+  loginInfo: LoginInfo;
 
   sortOrderForProfileList: SortOrder = {
     property: 'name',
@@ -118,6 +130,7 @@ export class MemberListComponent implements OnInit, OnDestroy {
 
   constructor(
     private store: Store<any>,
+    private appAuthenticationService: AppAuthenticationService,
     private appChatService: AppChatService,
     public mediaObserver: MediaObserver,
     private changeDetectorRef: ChangeDetectorRef,
@@ -172,13 +185,19 @@ export class MemberListComponent implements OnInit, OnDestroy {
         }
       });
 
+    this.store
+      .pipe(takeUntil(this.ngOnDestroySubject), select(LoginSelector.loginInfo))
+      .subscribe((loginInfo) => {
+        this.loginInfo = loginInfo;
+      });
+
     this.store
       .pipe(
         takeUntil(this.ngOnDestroySubject),
-        select(AuthorizationSelector.authResponse)
+        select(AuthorizationSelector.userPermission)
       )
-      .subscribe((authRes) => {
-        this.authRes = authRes;
+      .subscribe((userPermission) => {
+        this.userPermission = userPermission;
       });
   }
 
@@ -353,6 +372,22 @@ export class MemberListComponent implements OnInit, OnDestroy {
   }
 
   onClearSelected(): void {
+    if (!!this.selectedUserInfos && this.selectedUserInfos.length > 0) {
+      const tempSelectUser: UserInfoSS[] = [];
+
+      this.selectedUserInfos.forEach((selectUser) => {
+        this.searchedUserInfos.every((searchUser) => {
+          if (selectUser.seq === searchUser.seq) {
+            tempSelectUser.push(searchUser);
+            return false;
+          }
+          return true;
+        });
+      });
+
+      this.selectedUserInfos = [...tempSelectUser];
+    }
+
     this.profileList.uncheckAll();
   }
 
@@ -394,28 +429,15 @@ export class MemberListComponent implements OnInit, OnDestroy {
       });
   }
 
-  openChatRoom() {
-    if (
-      !!this.selectedUserInfos &&
-      this.selectedUserInfos.length >
-        environment.productConfig.chat.maxChatRoomUser
-    ) {
-      const result = this.dialog.open<
-        AlertDialogComponent,
-        AlertDialogData,
-        AlertDialogResult
-      >(AlertDialogComponent, {
-        panelClass: 'min-create-dialog',
-        data: {
-          title: this.i18nService.t('chat:errors.label'),
-          message: this.i18nService.t('chat:errors.maxCountOfRoomMemberWith', {
-            maxCount: environment.productConfig.chat.maxChatRoomUser
-          })
-        }
-      });
-      return;
+  openVideoConference() {
+    if (!!this.selectedUserInfos && this.selectedUserInfos.length > 0) {
+      this._openVideoConference(
+        this.selectedUserInfos.map((item) => Number(item.seq))
+      );
     }
+  }
 
+  openChatRoom() {
     if (!!this.selectedUserInfos && this.selectedUserInfos.length > 0) {
       this.appChatService.newOpenRoom(
         this.selectedUserInfos.map((item) => item.seq),
@@ -441,28 +463,43 @@ export class MemberListComponent implements OnInit, OnDestroy {
       .pipe(take(1))
       .subscribe((result) => {
         if (!!result && !!result.choice) {
-          this.selectedUserInfos = [];
+          // this.selectedUserInfos = [];
         }
       });
   }
 
-  onFloatingProfileMenu(params: { menuType: string; userInfo: UserInfoSS }) {
+  onClickProfileMenu(params: {
+    menuType: ProfileMenuType;
+    userInfo: UserInfoSS;
+  }) {
     switch (params.menuType) {
-      case 'CHAT':
+      case ProfileMenuType.chat:
         this.appChatService.newOpenRoom(
           [String(params.userInfo.seq)],
           false,
           this.user
         );
         break;
-      case 'MESSAGE':
+      case ProfileMenuType.message:
         break;
-      case 'MOBILE':
+      case ProfileMenuType.mobile:
         break;
-      case 'OFFICE':
+      case ProfileMenuType.office:
         break;
-      case 'VIDEO_CONFERENCE':
+      case ProfileMenuType.videoConference:
+        this._openVideoConference([Number(params.userInfo.seq)]);
         break;
     }
   }
+
+  private _openVideoConference(targetUserSeqs: number[]) {
+    const loginSession = this.appAuthenticationService.getLoginSession();
+    const req: ConferenceCreateRequest = {
+      userSeq: String(this.user.info.seq),
+      deviceType: loginSession.deviceType,
+      tokenKey: this.loginInfo.tokenString,
+      targetUserSeqs
+    };
+    this.appChatService.openVideoConference(req);
+  }
 }
diff --git a/src/app/sections/organization/dialogs/add-group.dialog.component.html b/src/app/sections/organization/dialogs/add-group.dialog.component.html
index 53d3cda..3457b4d 100644
--- a/src/app/sections/organization/dialogs/add-group.dialog.component.html
+++ b/src/app/sections/organization/dialogs/add-group.dialog.component.html
@@ -10,7 +10,7 @@
           [checkable]="true"
           [searchable]="false"
           [selectedGroupList]="selectedGroupList"
-          (changeGroupList)="onChangeSelectedGroupList($event)"
+          (toggleCheckGroup)="onToggleCheckGroup($event)"
           (changeGroupName)="onChangeGroupName($event)"
         ></app-sections-select-group>
       </div>
diff --git a/src/app/sections/organization/dialogs/add-group.dialog.component.scss b/src/app/sections/organization/dialogs/add-group.dialog.component.scss
index 1dc77ad..6cbdb26 100644
--- a/src/app/sections/organization/dialogs/add-group.dialog.component.scss
+++ b/src/app/sections/organization/dialogs/add-group.dialog.component.scss
@@ -6,6 +6,9 @@
   .dialog-body {
     width: 100%;
     height: 100%;
+    .ucap-organization-add-group-body {
+      height: 100%;
+    }
   }
   .btn-box {
     display: flex;
diff --git a/src/app/sections/organization/dialogs/add-group.dialog.component.ts b/src/app/sections/organization/dialogs/add-group.dialog.component.ts
index b9131da..0f7d203 100644
--- a/src/app/sections/organization/dialogs/add-group.dialog.component.ts
+++ b/src/app/sections/organization/dialogs/add-group.dialog.component.ts
@@ -19,9 +19,15 @@ import {
   MatDialog
 } from '@angular/material/dialog';
 
-import { UserInfo, GroupDetailData } from '@ucap/protocol-sync';
-import { UserInfoSS, UserInfoF, UserInfoDN } from '@ucap/protocol-query';
-import { UserInfo as RoomUserInfo } from '@ucap/protocol-room';
+import {
+  UserInfo,
+  UserInfoSS,
+  UserInfoF,
+  UserInfoDN
+} from '@ucap/domain-organization';
+import { GroupInfoDetail } from '@ucap/domain-group';
+import { UserInfo as RoomUserInfo } from '@ucap/domain-chat';
+
 import { MatStepper } from '@angular/material/stepper';
 import { I18nService } from '@ucap/ng-i18n';
 import { GroupActions } from '@ucap/ng-store-group';
@@ -32,7 +38,7 @@ import {
   ConfirmDialogComponent,
   ConfirmDialogResult,
   ConfirmDialogData
-} from '@ucap/ng-ui';
+} from '@ucap/ng-ui/core';
 
 import { take, map, catchError } from 'rxjs/operators';
 
@@ -76,7 +82,7 @@ export class AddGroupDialogComponent implements OnInit, OnDestroy {
 
   groupName = '';
   selectedUserList: UserInfoTypes[] = [];
-  selectedGroupList: GroupDetailData[] = [];
+  selectedGroupList: GroupInfoDetail[] = [];
   isDisableBtn = false;
 
   ngOnInit(): void {
@@ -113,10 +119,7 @@ export class AddGroupDialogComponent implements OnInit, OnDestroy {
     }
   }
 
-  onChangeSelectedGroupList(data: {
-    checked: boolean;
-    group: GroupDetailData;
-  }) {
+  onToggleCheckGroup(data: { checked: boolean; group: GroupInfoDetail }) {
     const i = this.selectedGroupList.findIndex((u) => u.seq === data.group.seq);
 
     if (data.checked) {
diff --git a/src/app/sections/organization/dialogs/profile.dialog.component.html b/src/app/sections/organization/dialogs/profile.dialog.component.html
index 726c44f..ae8e5a4 100644
--- a/src/app/sections/organization/dialogs/profile.dialog.component.html
+++ b/src/app/sections/organization/dialogs/profile.dialog.component.html
@@ -2,7 +2,7 @@
   <app-layouts-default-dialog
     [disableClose]="false"
     (closed)="onClosed($event)"
-    class="ucap-dialog-chat-text-detail-container"
+    class="ucap-dialog-profile-container"
   >
     <div appLayoutsDefaultDialog="header">
       {{ 'organization:profile.other' | ucapI18n }}
@@ -10,7 +10,8 @@
     <div class="dialog-body" appLayoutsDefaultDialog="body">
       <app-organization-profile-01
         [userSeq]="data.userSeq"
-        (openChat)="onOpenCaht($event)"
+        [companyList]="companyList"
+        (openChat)="onOpenChat($event)"
         (sendMessage)="onSendMessage($event)"
         (sendCall)="onSendCall($event)"
         (sendSms)="onSendSms($event)"
diff --git a/src/app/sections/organization/dialogs/profile.dialog.component.scss b/src/app/sections/organization/dialogs/profile.dialog.component.scss
index 694699c..116ee24 100644
--- a/src/app/sections/organization/dialogs/profile.dialog.component.scss
+++ b/src/app/sections/organization/dialogs/profile.dialog.component.scss
@@ -6,6 +6,7 @@
   .dialog-body {
     width: 100%;
     height: 100%;
+    padding-top: 0;
   }
   .btn-box {
     display: flex;
diff --git a/src/app/sections/organization/dialogs/profile.dialog.component.ts b/src/app/sections/organization/dialogs/profile.dialog.component.ts
index 9e79fc5..5edda66 100644
--- a/src/app/sections/organization/dialogs/profile.dialog.component.ts
+++ b/src/app/sections/organization/dialogs/profile.dialog.component.ts
@@ -1,5 +1,5 @@
 import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { takeUntil, take, map } from 'rxjs/operators';
 
 import {
   Component,
@@ -18,26 +18,40 @@ import {
 
 import { select, Store } from '@ngrx/store';
 
-import { FileUploadItem } from '@ucap/api';
+import { FileUploadItem } from '@ucap/domain-common';
+import {
+  UserInfoUpdateType,
+  User,
+  UserInfoSS,
+  UserInfoF,
+  Company
+} from '@ucap/domain-organization';
+
 import { FileProfileSaveRequest } from '@ucap/api-common';
-import { VersionInfo2Response } from '@ucap/api-public';
-import { UserInfoSS, UserInfoF } from '@ucap/protocol-query';
-import { LoginResponse } from '@ucap/protocol-authentication';
-import { UserInfoUpdateType, User } from '@ucap/protocol-info';
 
 import { LogService } from '@ucap/ng-logger';
 
-import { UserSelector } from '@ucap/ng-store-organization';
+import { UserSelector, CompanySelector } from '@ucap/ng-store-organization';
 import {
   LoginSelector,
   ConfigurationSelector
 } from '@ucap/ng-store-authentication';
 
-import { UserInfoTypes } from '@app/types';
+import { UserInfoTypes, GroupManageType } from '@app/types';
 import { AppGroupService } from '@app/services/app-group.service';
 import { AppFileService } from '@app/services/app-file.service';
 import { AppAuthenticationService } from '@app/services/app-authentication.service';
 import { AppChatService } from '@app/services/app-chat.service';
+import { BuddySelector } from '@ucap/ng-store-group';
+import {
+  EditUserDialogComponent,
+  EditUserDialogData,
+  EditUserDialogResult
+} from '@app/sections/group/dialogs/edit-user.dialog.component';
+import { I18nService } from '@ucap/ng-i18n';
+
+import { ConferenceCreateRequest } from '@ucap/api-prompt';
+import { LoginInfo, VersionInfo } from '@ucap/domain-authentication';
 
 export interface ProfileDialogData {
   userSeq: string;
@@ -57,7 +71,8 @@ export class ProfileDialogComponent implements OnInit, OnDestroy {
     @Inject(MAT_DIALOG_DATA) public data: ProfileDialogData,
     private logService: LogService,
     private changeDetectorRef: ChangeDetectorRef,
-    public matDialog: MatDialog,
+    public dialog: MatDialog,
+    private i18nService: I18nService,
     private appAuthenticationService: AppAuthenticationService,
     private appGroupService: AppGroupService,
     private appChatService: AppChatService,
@@ -65,15 +80,17 @@ export class ProfileDialogComponent implements OnInit, OnDestroy {
   ) {}
 
   private ngOnDestroySubject: Subject<void> = new Subject();
-  private loginRes: LoginResponse;
+  private loginInfo: LoginInfo;
   private user: User;
-  private versionInfo2Res: VersionInfo2Response;
+  private versionInfo: VersionInfo;
+  buddyList: UserInfoTypes[];
+  companyList: Company[];
 
   ngOnInit(): void {
     this.store
-      .pipe(takeUntil(this.ngOnDestroySubject), select(LoginSelector.loginRes))
-      .subscribe((loginRes) => {
-        this.loginRes = loginRes;
+      .pipe(takeUntil(this.ngOnDestroySubject), select(LoginSelector.loginInfo))
+      .subscribe((loginInfo) => {
+        this.loginInfo = loginInfo;
       });
     this.store
       .pipe(takeUntil(this.ngOnDestroySubject), select(UserSelector.user))
@@ -84,10 +101,28 @@ export class ProfileDialogComponent implements OnInit, OnDestroy {
     this.store
       .pipe(
         takeUntil(this.ngOnDestroySubject),
-        select(ConfigurationSelector.versionInfo2Response)
+        select(ConfigurationSelector.versionInfo)
       )
-      .subscribe((versionInfo2Res) => {
-        this.versionInfo2Res = versionInfo2Res;
+      .subscribe((versionInfo) => {
+        this.versionInfo = versionInfo;
+      });
+
+    this.store
+      .pipe(takeUntil(this.ngOnDestroySubject), select(BuddySelector.buddies))
+      .subscribe((buddies) => {
+        this.buddyList = buddies;
+      });
+
+    this.store
+      .pipe(
+        takeUntil(this.ngOnDestroySubject),
+        select(CompanySelector.companyList)
+      )
+      .subscribe((companyList) => {
+        if (!companyList) {
+          return;
+        }
+        this.companyList = companyList;
       });
   }
 
@@ -102,7 +137,7 @@ export class ProfileDialogComponent implements OnInit, OnDestroy {
     this.dialogRef.close();
   }
 
-  onOpenCaht(userInfo: UserInfoSS) {
+  onOpenChat(userInfo: UserInfoSS) {
     this.appChatService.newOpenRoom(
       [Number(userInfo.seq) as any],
       false,
@@ -113,17 +148,53 @@ export class ProfileDialogComponent implements OnInit, OnDestroy {
   onSendMessage(userInfo: UserInfoSS) {}
   onSendCall(call: string) {}
   onSendSms(employeeNum: string) {}
-  onCreateConference(userSeq: number) {}
+  onCreateConference(userSeq: number) {
+    const loginSession = this.appAuthenticationService.getLoginSession();
+    const req: ConferenceCreateRequest = {
+      userSeq: String(this.user.info.seq),
+      deviceType: loginSession.deviceType,
+      tokenKey: this.loginInfo.tokenString,
+      targetUserSeqs: [userSeq]
+    };
+    this.appChatService.openVideoConference(req);
+  }
   onToggleFavorit(params: { userInfo: UserInfoSS; isFavorite: boolean }) {
     this.appGroupService.updateBuddy(params.userInfo, params.isFavorite);
   }
   onToggleBuddy(params: { userInfo: UserInfoSS; isBuddy: boolean }) {
-    this.appGroupService
-      .updateBuddyByToggle(params)
-      .then((isRemoveBuddy) => {
-        this.changeDetectorRef.markForCheck();
-      })
-      .catch((reson) => this.logService.error(reson));
+    if (params.isBuddy) {
+      // 동료추가
+      const dialogRef = this.dialog.open<
+        EditUserDialogComponent,
+        EditUserDialogData,
+        EditUserDialogResult
+      >(EditUserDialogComponent, {
+        panelClass: 'max-create-dialog',
+        data: {
+          title: this.i18nService.t('group:dialog.title.addBuddy'),
+          type: GroupManageType.Add,
+          userInfos: [params.userInfo]
+        }
+      });
+      dialogRef
+        .afterClosed()
+        .pipe(
+          take(1),
+          map((result: EditUserDialogResult) => {
+            if (!!result) {
+              this.appGroupService
+                .addBuddy(result)
+                .then(() => this.changeDetectorRef.markForCheck());
+            }
+          })
+        )
+        .subscribe();
+    } else {
+      // 동료삭제
+      this.appGroupService
+        .removeBuddy(params.userInfo)
+        .then(() => this.changeDetectorRef.markForCheck());
+    }
   }
   onUploadProfileImage(profileImageFileUploadItem: FileUploadItem) {
     const loginSession = this.appAuthenticationService.getLoginSession();
@@ -131,20 +202,29 @@ export class ProfileDialogComponent implements OnInit, OnDestroy {
     const profile = {
       userSeq: String(this.user.info.seq),
       deviceType: loginSession.deviceType,
-      token: this.loginRes.tokenString,
+      token: this.loginInfo.tokenString,
       file: profileImageFileUploadItem.file,
       fileUploadItem: profileImageFileUploadItem
     } as FileProfileSaveRequest;
 
     this.appFileServie.fileProfileSave(
       profile,
-      this.versionInfo2Res.profileUploadUrl
+      this.versionInfo.profileUploadUrl
     );
   }
   onUpdateIntro(intro: string) {
     this.appGroupService.updateIntro(intro, UserInfoUpdateType.Intro);
   }
   onUpdateNickname(params: { userInfo: UserInfoTypes; nickname: string }) {
+    const isBuddy = this.appGroupService.checkBuddy(
+      this.buddyList,
+      params.userInfo
+    );
+
+    if (!isBuddy) {
+      return;
+    }
+
     this.appGroupService.updateNickname(
       params.userInfo as UserInfoF,
       params.nickname
diff --git a/src/app/sections/organization/organization.section.module.ts b/src/app/sections/organization/organization.section.module.ts
index f1eb1ee..84ccc5d 100644
--- a/src/app/sections/organization/organization.section.module.ts
+++ b/src/app/sections/organization/organization.section.module.ts
@@ -20,7 +20,7 @@ import { MatSidenavModule } from '@angular/material/sidenav';
 import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 
 import { I18nModule, UCAP_I18N_NAMESPACE } from '@ucap/ng-i18n';
-import { UiModule } from '@ucap/ng-ui';
+// import { UiModule } from '@ucap/ng-ui';
 import { OrganizationUiModule } from '@ucap/ng-ui-organization';
 import { AppLayoutsModule } from '@app/layouts/layouts.module';
 import { AppOrganizationModule } from '@app/ucap/organization/organization.module';
@@ -51,7 +51,7 @@ import { DIALOGS } from './dialogs';
     PerfectScrollbarModule,
 
     I18nModule,
-    UiModule,
+
     OrganizationUiModule,
 
     AppLayoutsModule,
diff --git a/src/app/services/app-account.service.ts b/src/app/services/app-account.service.ts
index bdd9d34..35799de 100644
--- a/src/app/services/app-account.service.ts
+++ b/src/app/services/app-account.service.ts
@@ -20,7 +20,7 @@ export class AppAccountService {
   async dialogForSettings() {
     const userStore = this.appAuthenticationService.getUserStore();
 
-    const result = await this.matDialog.open<
+    const result = this.matDialog.open<
       SettingsDialogComponent,
       SettingsDialogData,
       SettingsDialogResult
diff --git a/src/app/services/app-authentication.service.ts b/src/app/services/app-authentication.service.ts
index 7ad483f..2832dfa 100644
--- a/src/app/services/app-authentication.service.ts
+++ b/src/app/services/app-authentication.service.ts
@@ -5,10 +5,14 @@ import { Injectable, Inject } from '@angular/core';
 
 import { Store } from '@ngrx/store';
 
-import { LocaleCode } from '@ucap/core';
+import { MatDialog } from '@angular/material/dialog';
+
+import { LocaleCode } from '@ucap/domain-common';
+import { SSOMode, LoginInfo } from '@ucap/domain-authentication';
+import { StatusBulkInfo } from '@ucap/domain-status';
 
 import { PasswordUtil } from '@ucap/pi';
-import { LoginResponse, SSOMode } from '@ucap/protocol-authentication';
+
 import { NativeService } from '@ucap/native';
 
 import {
@@ -19,6 +23,13 @@ import { UCAP_NATIVE_SERVICE } from '@ucap/ng-native';
 import { InnerProtocolService } from '@ucap/ng-protocol-inner';
 import { AuthenticationProtocolService } from '@ucap/ng-protocol-authentication';
 import { LoginActions } from '@ucap/ng-store-authentication';
+import { PresenceActions } from '@ucap/ng-store-organization';
+
+import {
+  ConfirmDialogComponent,
+  ConfirmDialogData,
+  ConfirmDialogResult
+} from '@ucap/ng-ui/core';
 
 import { LoginSession } from '@app/models/login-session';
 import { UserStore } from '@app/models/user-store';
@@ -26,8 +37,6 @@ import { UserStore } from '@app/models/user-store';
 import { AppKey } from '@app/types/app-key.type';
 
 import { environment } from '@environments';
-import { PresenceActions } from '@ucap/ng-store-organization';
-import { StatusBulkInfo } from '@ucap/protocol-status';
 
 @Injectable({
   providedIn: 'root'
@@ -39,7 +48,8 @@ export class AppAuthenticationService {
     private sessionStorageService: SessionStorageService,
     private localStorageService: LocalStorageService,
     private store: Store<any>,
-    @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService
+    @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
+    private matDialog: MatDialog
   ) {}
 
   getUserStore(): UserStore {
@@ -185,11 +195,11 @@ export class AppAuthenticationService {
   }
 
   createSession(): Promise<{
-    loginRes: LoginResponse;
+    loginInfo: LoginInfo;
     loginSession: LoginSession;
   }> {
     return new Promise<{
-      loginRes: LoginResponse;
+      loginInfo: LoginInfo;
       loginSession: LoginSession;
     }>(async (resolve, reject) => {
       const loginSession = this.getLoginSession();
@@ -233,17 +243,17 @@ export class AppAuthenticationService {
           })
         )
         .subscribe(
-          (loginRes) => {
+          (result) => {
             this.store.dispatch(
               LoginActions.loginSuccess({
-                res: loginRes,
+                loginInfo: result.loginInfo,
                 loginSession
               })
             );
             // this.store.dispatch(
             //   PresenceActions.bulkInfo({
             //     divCd: 'myBulk',
-            //     userSeqs: [loginRes.userSeq]
+            //     userSeqs: [loginInfo.userSeq]
             //   })
             // );
             // 임시 코드
@@ -260,14 +270,14 @@ export class AppAuthenticationService {
                     statusMessage: '.',
                     terminalStatus: 'TERMINAL_STATE_UNKNOWN',
                     terminalStatusNumber: 0,
-                    userSeq: String(loginRes.userSeq)
+                    userSeq: String(result.loginInfo.userSeq)
                   } as StatusBulkInfo
                 ]
               })
             );
             resolve({
               loginSession,
-              loginRes
+              loginInfo: result.loginInfo
             });
           },
           (error) => {
@@ -277,6 +287,52 @@ export class AppAuthenticationService {
     });
   }
 
+  exitConfirm(): Promise<boolean> {
+    return new Promise<boolean>((resolve, reject) => {
+      const dialogRef = this.matDialog.open<
+        ConfirmDialogComponent,
+        ConfirmDialogData,
+        ConfirmDialogResult
+      >(ConfirmDialogComponent, {
+        panelClass: '',
+        data: {
+          title: '',
+          message: ''
+        }
+      });
+
+      dialogRef
+        .afterClosed()
+        .pipe(take(1))
+        .subscribe((result) => {
+          resolve(result.choice);
+        });
+    });
+  }
+
+  logoutConfirm(): Promise<boolean> {
+    return new Promise<boolean>((resolve, reject) => {
+      const dialogRef = this.matDialog.open<
+        ConfirmDialogComponent,
+        ConfirmDialogData,
+        ConfirmDialogResult
+      >(ConfirmDialogComponent, {
+        panelClass: '',
+        data: {
+          title: '',
+          message: ''
+        }
+      });
+
+      dialogRef
+        .afterClosed()
+        .pipe(take(1))
+        .subscribe((result) => {
+          resolve(result.choice);
+        });
+    });
+  }
+
   logout() {
     this.sessionStorageService.remove(AppKey.LoginSession);
 
diff --git a/src/app/services/app-call.service.ts b/src/app/services/app-call.service.ts
new file mode 100644
index 0000000..67ef404
--- /dev/null
+++ b/src/app/services/app-call.service.ts
@@ -0,0 +1,86 @@
+import { of } from 'rxjs';
+import { take, map, finalize, catchError } from 'rxjs/operators';
+
+import { Injectable, Inject, NgZone } from '@angular/core';
+
+import { Store } from '@ngrx/store';
+
+import { NativeService } from '@ucap/native';
+
+import { I18nService } from '@ucap/ng-i18n';
+import { CommonApiService } from '@ucap/ng-api-common';
+import { LogService } from '@ucap/ng-logger';
+import { UCAP_NATIVE_SERVICE } from '@ucap/ng-native';
+import { FileProtocolService } from '@ucap/ng-protocol-file';
+
+import { AppAuthenticationService } from './app-authentication.service';
+import { MatDialog } from '@angular/material/dialog';
+import {
+  DialpadDialogComponent,
+  DialpadDialogData,
+  DialpadDialogResult
+} from '@app/sections/call/dialogs/dialpad.dialog.component';
+
+import { User } from '@ucap/domain-organization';
+import { DeviceType } from '@ucap/domain-common';
+import { SendClicktocallRequest } from '@ucap/api-message';
+import { MessageApiService } from '@ucap/ng-api-message';
+import { LoginInfo } from '@ucap/domain-authentication';
+import {
+  AlertDialogComponent,
+  AlertDialogData,
+  AlertDialogResult
+} from '@ucap/ng-ui/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AppCallService {
+  constructor(
+    private dialog: MatDialog,
+    private store: Store<any>,
+    private i18nService: I18nService,
+    private commonApiService: CommonApiService,
+    private messageApiService: MessageApiService,
+    private appAuthenticationService: AppAuthenticationService,
+    private logService: LogService
+  ) {}
+
+  sendClicktocall(
+    loginInfo: LoginInfo,
+    user: User,
+    deviceType: DeviceType,
+    calleeNumber: string
+  ) {
+    if (!!calleeNumber || calleeNumber.trim().length === 0) {
+      this.dialog.open<
+        AlertDialogComponent,
+        AlertDialogData,
+        AlertDialogResult
+      >(AlertDialogComponent, {
+        panelClass: 'min-create-dialog',
+        data: {
+          title: this.i18nService.t('call:label.error'),
+          message: this.i18nService.t('call:errors.noExistTargetnumber')
+        }
+      });
+      return;
+    }
+
+    const req: SendClicktocallRequest = {
+      userSeq: String(user.info.seq),
+      deviceType,
+      tokenKey: loginInfo.tokenString,
+      calleeNumber
+    };
+
+    this.messageApiService
+      .sendClicktocall(req)
+      .pipe(
+        take(1),
+        map((res) => {}),
+        catchError((error) => of({ error }))
+      )
+      .subscribe();
+  }
+}
diff --git a/src/app/services/app-chat.service.ts b/src/app/services/app-chat.service.ts
index 9282e6d..1dfa448 100644
--- a/src/app/services/app-chat.service.ts
+++ b/src/app/services/app-chat.service.ts
@@ -1,42 +1,26 @@
-import { Observable, of, forkJoin } from 'rxjs';
-import { take, map, catchError } from 'rxjs/operators';
+import { Observable, of, forkJoin, Subject } from 'rxjs';
+import { take, map, catchError, takeUntil } from 'rxjs/operators';
 
-import { Injectable, NgZone } from '@angular/core';
+import { Injectable, NgZone, Inject, OnDestroy } from '@angular/core';
+import { Router } from '@angular/router';
 
 import { Store } from '@ngrx/store';
+import { Dictionary } from '@ngrx/entity';
 
-import { DeviceType, FileUtil } from '@ucap/core';
+import { MatDialog } from '@angular/material/dialog';
 
-import { LoginResponse, SSOMode } from '@ucap/protocol-authentication';
-
-import { LocalStorageService } from '@ucap/ng-web-storage';
-
-import { environment } from '@environments';
+import { FileUtil } from '@ucap/core';
+import { DeviceType, FileUploadItem } from '@ucap/domain-common';
+import { User } from '@ucap/domain-organization';
 import {
   RoomInfo,
   RoomType,
-  OpenRequest,
-  Open3Request,
-  ExitRequest
-} from '@ucap/protocol-room';
-import { Dictionary } from '@ngrx/entity';
-import {
-  RoomUserMap,
-  RoomUserShortMap
-} from '@ucap/ng-store-chat/lib/store/room/state';
-
-import {
-  TranslatePipe as OrganizationTranslate,
-  TranslateService
-} from '@ucap/ng-ui-organization';
-import { I18nService } from '@ucap/ng-i18n';
-import { ChattingActions, RoomActions } from '@ucap/ng-store-chat';
-import {
-  SendRequest as SendEventRequest,
   EventType,
   Info,
   MassTranslationEventJson
-} from '@ucap/protocol-event';
+} from '@ucap/domain-chat';
+
+import { StatusCode } from '@ucap/api';
 import {
   MassTalkSaveRequest,
   FileTalkSaveResponse,
@@ -45,10 +29,42 @@ import {
   TransMassTalkDownloadRequest,
   TransMassTalkDownloadResponse
 } from '@ucap/api-common';
-import { CommonApiService } from '@ucap/ng-api-common';
-import { StatusCode, FileUploadItem } from '@ucap/api';
+import {
+  ConferenceCreateRequest,
+  ConferenceJoinRequest,
+  ModuleConfig
+} from '@ucap/api-prompt';
+import {
+  ConferenceCreateRequest as WebexConferenceCreateRequest,
+  ConferenceJoinRequest as WebexConferenceJoinRequest,
+  ModuleConfig as WebexModuleConfig
+} from '@ucap/api-webex';
+
+import { OpenRequest, Open3Request, ExitRequest } from '@ucap/protocol-room';
+import { SendRequest as SendEventRequest } from '@ucap/protocol-event';
+import { NativeService } from '@ucap/native';
+
 import { LogService } from '@ucap/ng-logger';
-import { MatDialog } from '@angular/material/dialog';
+import { I18nService } from '@ucap/ng-i18n';
+import { LocalStorageService } from '@ucap/ng-web-storage';
+import { CommonApiService } from '@ucap/ng-api-common';
+import { ConferenceService } from '@ucap/ng-api-prompt';
+import { ConferenceService as WebexConferenceService } from '@ucap/ng-api-webex';
+import { UCAP_NATIVE_SERVICE } from '@ucap/ng-native';
+
+import {
+  RoomUserMap,
+  RoomUserShortMap
+} from '@ucap/ng-store-chat/lib/store/room/state';
+import { ChattingActions, RoomActions } from '@ucap/ng-store-chat';
+
+import {
+  TranslatePipe as OrganizationTranslate,
+  TranslateService
+} from '@ucap/ng-ui-organization';
+
+import { environment } from '@environments';
+
 import {
   AlertDialogComponent,
   AlertDialogData,
@@ -57,14 +73,10 @@ import {
   ConfirmDialogData,
   ConfirmDialogResult,
   ClipboardService
-} from '@ucap/ng-ui';
+} from '@ucap/ng-ui/core';
+
 import { StickerFilesInfo, KEY_STICKER_HISTORY } from '@ucap/ng-core';
-import {
-  CreateDialogComponent,
-  CreateDialogData,
-  CreateDialogResult
-} from '@app/sections/chat/dialogs/create.dialog.component';
-import { Router } from '@angular/router';
+
 import {
   TransDetailDialogComponent,
   TransDetailDialogData,
@@ -75,27 +87,54 @@ import {
   FileViewerDialogData,
   FileViewerDialogResult
 } from '@app/sections/chat/dialogs/file-viewer.dialog.component';
-import { User } from '@ucap/protocol-info';
+import { AppRoomActions } from '@app/store/actions';
+
+import { AppUiService } from './app-ui.service';
+import { LoginInfo } from '@ucap/domain-authentication';
 
 @Injectable({
   providedIn: 'root'
 })
-export class AppChatService {
+export class AppChatService implements OnDestroy {
   defaultProfileImage = 'assets/images/ico/img_nophoto.svg';
   defaultProfileImageMulti = 'assets/images/ico/img_nophoto_multiple.svg';
 
+  private ngOnDestroySubject: Subject<void> = new Subject();
+
   constructor(
     private i18nService: I18nService,
     private dialog: MatDialog,
     private localStorageService: LocalStorageService,
     private store: Store<any>,
+    private appUiService: AppUiService,
     private commonApiService: CommonApiService,
+    private conferenceService: ConferenceService,
+    private webexConferenceService: WebexConferenceService,
     private clipboardService: ClipboardService,
     private router: Router,
     private logService: LogService,
+    @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
     private ngZone: NgZone
   ) {}
 
+  ngOnDestroy(): void {
+    if (!!this.ngOnDestroySubject) {
+      this.ngOnDestroySubject.next();
+      this.ngOnDestroySubject.complete();
+    }
+  }
+
+  subscribe(): void {
+    this.nativeService
+      .chat_onOpen$()
+      .pipe(takeUntil(this.ngOnDestroySubject))
+      .subscribe((roomId) => {
+        this.ngZone.run(() => {
+          this.openRoombyRoomId(roomId);
+        });
+      });
+  }
+
   /**
    * 방이름 생성.
    * cf) 방이름이 지정되어 있다면 방이름 리턴, 지정되어 있지 않으면 방참여인원의 이름 조합.
@@ -196,14 +235,19 @@ export class AppChatService {
             roomUsersMap,
             roomUsersShortMap
           );
-
-          if (roomUsers.users.length > 0) {
-            roomName = roomUsers.users
-              .map((item) => organizationTranslate.transform(item, 'name'))
-              .sort((a, b) => (a < b ? -1 : a > b ? 1 : 0))
-              .join(',');
+          const curRoomName = roomInfo.roomName;
+          if (!!curRoomName && curRoomName.trim().length > 0) {
+            // Exist RoomName.
+            roomName = curRoomName;
           } else {
-            roomName = this.i18nService.t('chat:room.noRoomUser');
+            if (roomUsers.users.length > 0) {
+              roomName = roomUsers.users
+                .map((item) => organizationTranslate.transform(item, 'name'))
+                .sort((a, b) => (a < b ? -1 : a > b ? 1 : 0))
+                .join(',');
+            } else {
+              roomName = this.i18nService.t('chat:room.noRoomUser');
+            }
           }
         }
         break;
@@ -453,7 +497,7 @@ export class AppChatService {
 
   /** Send Masstext message */
   sendMessageOfMassText(
-    loginRes: LoginResponse,
+    loginInfo: LoginInfo,
     user: User,
     deviceType: DeviceType,
     roomId: string,
@@ -462,7 +506,7 @@ export class AppChatService {
     const req: MassTalkSaveRequest = {
       userSeq: String(user.info.seq),
       deviceType,
-      token: loginRes.tokenString,
+      token: loginInfo.tokenString,
       content: sentMessage.replace(/"/g, '\\"'),
       roomId
     };
@@ -609,7 +653,7 @@ export class AppChatService {
   }
   /** Send AttachFile message */
   sendMessageOfAttachFile(
-    loginRes: LoginResponse,
+    loginInfo: LoginInfo,
     user: User,
     deviceType: DeviceType,
     roomId: string,
@@ -651,7 +695,7 @@ export class AppChatService {
         const req: FileTalkSaveRequest = {
           userSeq: String(user.info.seq),
           deviceType,
-          token: loginRes.tokenString,
+          token: loginInfo.tokenString,
           roomId,
           file: fileUploadItem.file,
           fileName: fileUploadItem.file.name,
@@ -743,36 +787,8 @@ export class AppChatService {
       });
   }
 
-  /**
-   * Open Dialog for 'New Room Open'.
-   */
-  newOpenRoomDialog(): void {
-    const dialogRef = this.dialog.open<
-      CreateDialogComponent,
-      CreateDialogData,
-      CreateDialogResult
-    >(CreateDialogComponent, {
-      panelClass: 'max-create-dialog',
-      data: {}
-    });
-
-    dialogRef
-      .afterClosed()
-      .pipe(
-        take(1),
-        map((result) => {
-          if (!!result && !!result.userSeqs && result.userSeqs.length > 0) {
-            this.newOpenRoom(result.userSeqs, result.isTimer);
-          }
-        }),
-        catchError((err) => {
-          return of(err);
-        })
-      )
-      .subscribe();
-  }
-
   openRoombyRoomId(roomId: string): void {
+    this.appUiService.closeLeftSidenavOnNarrowMode();
     this.router.navigate(
       [
         'chat',
@@ -787,21 +803,36 @@ export class AppChatService {
   }
 
   newOpenRoom(userSeqs: string[], isTimerRoom: boolean, user?: User) {
-    // popup all close.
-    this.dialog.closeAll();
-
-    if (
-      !userSeqs ||
-      userSeqs.length === 0 ||
-      userSeqs.length > (environment.productConfig.chat.maxChatRoomUser || 299)
-    ) {
+    // maxChatRoomUser check.
+    const maxChatRoomUser = environment.productConfig.chat.maxChatRoomUser;
+    if (!!userSeqs && userSeqs.length >= (maxChatRoomUser || 300)) {
+      this.dialog.open<
+        AlertDialogComponent,
+        AlertDialogData,
+        AlertDialogResult
+      >(AlertDialogComponent, {
+        panelClass: 'min-create-dialog',
+        data: {
+          title: this.i18nService.t('chat:errors.label'),
+          html: this.i18nService.t('chat:errors.maxCountOfRoomMemberWith', {
+            maxCount: maxChatRoomUser
+          })
+        }
+      });
+      return;
+    }
+    if (!userSeqs || userSeqs.length === 0) {
       this.logService.error(
-        `open room user over size by ${
-          environment.productConfig.chat.maxChatRoomUser || 299
+        `error open room user size by ${
+          environment.productConfig.chat.maxChatRoomUser || 300
         }`
       );
       return;
     }
+
+    // popup all close.
+    this.dialog.closeAll();
+    this.appUiService.closeLeftSidenavOnNarrowMode();
     isTimerRoom = isTimerRoom || false;
 
     if (!!isTimerRoom) {
@@ -857,4 +888,39 @@ export class AppChatService {
       data
     });
   }
+
+  setHistoryRoomId(historyRoomId: string | null) {
+    this.store.dispatch(AppRoomActions.setHistoryRoomId({ historyRoomId }));
+  }
+
+  openVideoConference(
+    req: ConferenceCreateRequest | WebexConferenceCreateRequest
+  ) {
+    /** CASE :: others */
+    // const urlCreateVideoConference = this.conferenceService.urlForWebexConferenceCreate(req);
+
+    /** CASE :: webex */
+    const urlCreateVideoConference = this.webexConferenceService.urlForConferenceCreate(
+      req
+    );
+    if (
+      !!urlCreateVideoConference &&
+      urlCreateVideoConference.trim().length > 0
+    ) {
+      this.nativeService.platform_openDefaultBrowser(urlCreateVideoConference);
+    }
+  }
+
+  joinVideoConference(req: ConferenceJoinRequest | WebexConferenceJoinRequest) {
+    /** CASE :: others */
+    // const urlJoinVideoConference = this.conferenceService.urlForWebexConferencejoin(req);
+
+    /** CASE :: webex */
+    const urlJoinVideoConference = this.webexConferenceService.urlForConferencejoin(
+      req
+    );
+    if (!!urlJoinVideoConference && urlJoinVideoConference.trim().length > 0) {
+      this.nativeService.platform_openDefaultBrowser(urlJoinVideoConference);
+    }
+  }
 }
diff --git a/src/app/services/app-file.service.ts b/src/app/services/app-file.service.ts
index 0fa0c53..6399b9b 100644
--- a/src/app/services/app-file.service.ts
+++ b/src/app/services/app-file.service.ts
@@ -5,15 +5,22 @@ import { Injectable, Inject, NgZone } from '@angular/core';
 
 import { Store } from '@ngrx/store';
 
-import { FileUtil, LoginSession, MimeUtil } from '@ucap/core';
-import { NativeService } from '@ucap/native';
-import { FileDownloadItem, StatusCode } from '@ucap/api';
-import { FileProfileSaveRequest } from '@ucap/api-common';
-import { LoginResponse } from '@ucap/protocol-authentication';
-import { FileEventJson } from '@ucap/protocol-event';
-import { DownCheckRequest } from '@ucap/protocol-file';
-import { UserInfoUpdateType, User } from '@ucap/protocol-info';
+import { MatDialog } from '@angular/material/dialog';
 
+import { FileUtil, MimeUtil } from '@ucap/core';
+
+import { FileDownloadItem } from '@ucap/domain-common';
+import { UserInfoUpdateType, User } from '@ucap/domain-organization';
+import { LoginSession, LoginInfo } from '@ucap/domain-authentication';
+import { FileEventJson } from '@ucap/domain-chat';
+
+import { NativeService } from '@ucap/native';
+import { StatusCode } from '@ucap/api';
+import { FileProfileSaveRequest } from '@ucap/api-common';
+
+import { DownCheckRequest } from '@ucap/protocol-file';
+
+import { StringUtil } from '@ucap/ng-core';
 import { I18nService } from '@ucap/ng-i18n';
 import { CommonApiService } from '@ucap/ng-api-common';
 import { LogService } from '@ucap/ng-logger';
@@ -23,6 +30,12 @@ import { FileProtocolService } from '@ucap/ng-protocol-file';
 import { UserActions } from '@ucap/ng-store-organization';
 import { ChattingActions } from '@ucap/ng-store-chat';
 
+import {
+  AlertDialogComponent,
+  AlertDialogData,
+  AlertDialogResult
+} from '@ucap/ng-ui/core';
+
 import { UserStore } from '@app/models/user-store';
 
 import { AppAuthenticationService } from './app-authentication.service';
@@ -32,6 +45,7 @@ import { AppAuthenticationService } from './app-authentication.service';
 })
 export class AppFileService {
   constructor(
+    private dialog: MatDialog,
     private store: Store<any>,
     private i18nService: I18nService,
     private commonApiService: CommonApiService,
@@ -56,7 +70,7 @@ export class AppFileService {
         const msg = this.i18nService.t('common:file.errors.oversize', {
           maxSize: fileAllowSize
         });
-        alert(msg);
+        this._openAlert(msg);
 
         valid = false;
         return valid;
@@ -71,7 +85,7 @@ export class AppFileService {
       const msg = this.i18nService.t('common:file.errors.notSupporedType', {
         supporedType: checkExt.join(',')
       });
-      alert(msg);
+      this._openAlert(msg);
       // this.snackBarService.openFromComponent<
       //   AlertSnackbarComponent,
       //   AlertSnackbarData
@@ -100,7 +114,7 @@ export class AppFileService {
       const msg = this.i18nService.t('common:file.errors.notAcceptableMime', {
         supporedType: fakeMedia.join(',')
       });
-      alert(msg);
+      this._openAlert(msg);
 
       valid = false;
       return valid;
@@ -119,7 +133,7 @@ export class AppFileService {
           const msg = this.i18nService.t('common:file.errors.oversize', {
             maxSize: fileAllowSize
           });
-          alert(msg);
+          this._openAlert(msg);
 
           resolve(false);
         }
@@ -134,7 +148,7 @@ export class AppFileService {
               supporedType: extension
             }
           );
-          alert(msg);
+          this._openAlert(msg);
 
           resolve(false);
         }
@@ -184,20 +198,18 @@ export class AppFileService {
       )
       .subscribe(
         (res) => {
-          this.logService.debug('profile: ', res);
-          const findIdx = res.profileURL.indexOf('ProfileImage');
-          let imgInfo: string = res.profileURL;
+          let infoImg: string;
 
-          if (findIdx > -1) {
-            const startIdx = res.profileURL.indexOf('/', findIdx);
-            imgInfo = res.profileURL.substring(startIdx);
+          if (!!res.profileSubDir && res.profileSubDir.trim() !== '') {
+            infoImg = res.profileSubDir;
+          } else {
+            infoImg = StringUtil.getProfileSubDir(res.profileURL);
           }
-
           this.store.dispatch(
             UserActions.modifyInfo({
               req: {
                 type: UserInfoUpdateType.Image,
-                info: imgInfo
+                info: infoImg
               }
             })
           );
@@ -226,7 +238,7 @@ export class AppFileService {
       fileDownloadUrl?: string;
       savePath?: string;
     },
-    loginRes: LoginResponse,
+    loginInfo: LoginInfo,
     user: User,
     loginSession: LoginSession
   ) {
@@ -262,7 +274,7 @@ export class AppFileService {
           {
             userSeq: String(user.info.seq),
             deviceType: loginSession.deviceType,
-            token: loginRes.tokenString,
+            token: loginInfo.tokenString,
             attachmentsSeq: attachmentsSeq + '',
             fileDownloadItem
           },
@@ -337,4 +349,17 @@ export class AppFileService {
         .subscribe();
     });
   }
+
+  private _openAlert(msg: string) {
+    this.dialog.open<AlertDialogComponent, AlertDialogData, AlertDialogResult>(
+      AlertDialogComponent,
+      {
+        panelClass: 'min-create-dialog',
+        data: {
+          title: this.i18nService.t('common:file.errors.title'),
+          html: msg
+        }
+      }
+    );
+  }
 }
diff --git a/src/app/services/app-group.service.ts b/src/app/services/app-group.service.ts
index 1862a50..9184854 100644
--- a/src/app/services/app-group.service.ts
+++ b/src/app/services/app-group.service.ts
@@ -7,17 +7,23 @@ import { MatDialog } from '@angular/material/dialog';
 
 import { Store } from '@ngrx/store';
 
+import {
+  UserInfo,
+  UserInfoF,
+  UserInfoSS,
+  UserInfoDN,
+  UserInfoUpdateType
+} from '@ucap/domain-organization';
+import { GroupInfoDetail } from '@ucap/domain-group';
+
 import { NativeService } from '@ucap/native';
-import { GroupDetailData, UserInfo } from '@ucap/protocol-sync';
-import { UserInfoF, UserInfoSS, UserInfoDN } from '@ucap/protocol-query';
-import { UserInfoUpdateType } from '@ucap/protocol-info';
 
 import { LogService } from '@ucap/ng-logger';
 import { I18nService } from '@ucap/ng-i18n';
 import { UCAP_NATIVE_SERVICE } from '@ucap/ng-native';
 
 import { UserActions } from '@ucap/ng-store-organization';
-import { LoginActions } from '@ucap/ng-store-authentication';
+
 import { GroupActions, BuddyActions } from '@ucap/ng-store-group';
 
 import {
@@ -27,15 +33,10 @@ import {
   AlertDialogComponent,
   AlertDialogData,
   AlertDialogResult
-} from '@ucap/ng-ui';
+} from '@ucap/ng-ui/core';
 
-import { EditInlineInputDialogComponent } from '@app/sections/group/dialogs/edit-inline-input.dialog.component';
 import { UserInfoTypes, GroupManageType } from '@app/types';
-import {
-  EditUserDialogComponent,
-  EditUserDialogData,
-  EditUserDialogResult
-} from '@app/sections/group/dialogs/edit-user.dialog.component';
+import { AppService } from './app.service';
 
 @Injectable({
   providedIn: 'root'
@@ -46,11 +47,12 @@ export class AppGroupService {
     private store: Store<any>,
     private i18nService: I18nService,
     protected logService: LogService,
+    private appService: AppService,
     @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService
   ) {}
 
   addMemberToGroup(
-    targetGroup: GroupDetailData,
+    targetGroup: GroupInfoDetail,
     userInfoList: UserInfoTypes[]
   ) {
     const targetUserSeqs: string[] = [...targetGroup.userSeqs];
@@ -65,9 +67,16 @@ export class AppGroupService {
     this._updateMember(targetGroup, targetUserSeqs);
   }
 
+  updateMemberToGroup(
+    targetGroup: GroupInfoDetail,
+    userInfoList: UserInfoTypes[]
+  ) {
+    const targetUserSeqs = userInfoList.map((userInfo) => String(userInfo.seq));
+    this._updateMember(targetGroup, targetUserSeqs);
+  }
   moveMemberToGroup(
-    fromGroup: GroupDetailData,
-    toGroup: GroupDetailData,
+    fromGroup: GroupInfoDetail,
+    toGroup: GroupInfoDetail,
     userInfoList: UserInfoTypes[]
   ) {
     const targetUserSeqs: string[] = [];
@@ -85,7 +94,7 @@ export class AppGroupService {
     );
   }
   copyMemberToGroup(
-    targetGroup: GroupDetailData,
+    targetGroup: GroupInfoDetail,
     userInfoList: UserInfoTypes[]
   ) {
     const targetUserSeqs: string[] = [...targetGroup.userSeqs];
@@ -99,10 +108,26 @@ export class AppGroupService {
 
     this._updateMember(targetGroup, targetUserSeqs);
   }
+
+  removeMember(group: GroupInfoDetail, selelctUserList: UserInfoTypes[]) {
+    const trgtUserSeq: string[] = [];
+    const selectSeq: string[] = [];
+
+    selelctUserList.map((user) => selectSeq.push(String(user.seq)));
+
+    group.userSeqs.filter((buddySeq) => {
+      if (!trgtUserSeq.includes(buddySeq) && !selectSeq.includes(buddySeq)) {
+        trgtUserSeq.push(buddySeq);
+      }
+    });
+
+    this._updateMember(group, trgtUserSeq);
+  }
+
   removeMemberToGroup(
     contens: string,
     userInfoList: UserInfoTypes[],
-    group: GroupDetailData
+    group: GroupInfoDetail
   ): Promise<void> {
     return new Promise<void>((resolve, rejects) => {
       try {
@@ -123,21 +148,7 @@ export class AppGroupService {
             take(1),
             map((result) => {
               if (!!result && result.choice) {
-                const trgtUserSeq: string[] = [];
-                const selectSeq: string[] = [];
-
-                userInfoList.map((user) => selectSeq.push(String(user.seq)));
-
-                group.userSeqs.filter((buddySeq) => {
-                  if (
-                    !trgtUserSeq.includes(buddySeq) &&
-                    !selectSeq.includes(buddySeq)
-                  ) {
-                    trgtUserSeq.push(buddySeq);
-                  }
-                });
-
-                this._updateMember(group, trgtUserSeq);
+                this.removeMember(group, userInfoList);
                 resolve();
               }
             }),
@@ -170,7 +181,7 @@ export class AppGroupService {
     });
   }
   removeGroup(groupBuddyList: {
-    group: GroupDetailData;
+    group: GroupInfoDetail;
     buddyList: UserInfo[];
   }): Promise<void> {
     return new Promise<void>((resolve, rejects) => {
@@ -205,117 +216,103 @@ export class AppGroupService {
       }
     });
   }
-  updateGroupName(group: GroupDetailData, rect: any): Promise<void> {
+
+  updateGroupName(group: GroupInfoDetail, groupName: string): Promise<void> {
     return new Promise<void>((resolve, rejects) => {
       try {
-        const dialogRef = this.dialog.open(EditInlineInputDialogComponent, {
-          width: rect.width,
-          height: rect.height,
-          panelClass: 'ucap-edit-group-name-dialog',
-          data: {
-            type: 'GROUP_NAME',
-            curValue: group.name,
-            placeholder: this.i18nService.t('group:dialog.newGroupName'),
-            maxLength: 20,
-            left: rect.left,
-            top: rect.top
-          }
-        });
-
-        dialogRef
-          .afterClosed()
-          .pipe(
-            take(1),
-            map((result) => {
-              if (
-                !!result &&
-                result.choice &&
-                result.curValue.localeCompare(name) !== 0
-              ) {
-                this.store.dispatch(
-                  GroupActions.update({
-                    req: {
-                      groupSeq: group.seq,
-                      groupName: result.curValue,
-                      userSeqs: group.userSeqs
-                    }
-                  })
-                );
-                resolve();
-              }
-            }),
-            catchError((err) => {
-              return of(err);
-            })
-          )
-          .subscribe();
+        this.store.dispatch(
+          GroupActions.update({
+            req: {
+              groupSeq: group.seq,
+              groupName,
+              userSeqs: group.userSeqs
+            }
+          })
+        );
+        resolve();
       } catch (error) {
         rejects(error);
       }
     });
   }
 
-  updateBuddyByToggle(params: {
-    userInfo: UserInfoSS;
-    isBuddy: boolean;
+  addBuddy(datas: {
+    type: GroupManageType;
+    groupName?: string;
+    group?: GroupInfoDetail;
+    selelctUserList?: UserInfoTypes[];
+    selectGroupList?: GroupInfoDetail[];
   }): Promise<boolean> {
     return new Promise<boolean>((resolve, rejects) => {
       try {
-        if (params.isBuddy) {
-          // 동료추가
-          const dialogRef = this.dialog.open<
-            EditUserDialogComponent,
-            EditUserDialogData,
-            EditUserDialogResult
-          >(EditUserDialogComponent, {
-            width: '100%',
-            height: '100%',
-            data: {
-              title: this.i18nService.t('group:dialog.title.addBuddy'),
-              type: GroupManageType.Add,
-              userInfos: [params.userInfo]
-            }
-          });
-          dialogRef
-            .afterClosed()
-            .pipe(
-              take(1),
-              map((result: EditUserDialogResult) => {
-                if (result.type === GroupManageType.Add) {
-                  if (
-                    !!result.selectGroupList &&
-                    result.selectGroupList.length > 0
-                  ) {
-                    result.selectGroupList.forEach((g) => {
-                      this.addMemberToGroup(g, result.selelctUserList);
-                    });
-                  }
-                } else if (result.type === GroupManageType.Create) {
-                  this.createGroup(result.groupName, result.selelctUserList);
-                }
-                resolve(false);
-              }),
-              catchError((err) => {
-                return of(err);
-              })
-            )
-            .subscribe();
-        } else {
-          // 동료삭제
-
-          this.removeBuddy(params.userInfo)
-            .then(() => {
-              resolve(true);
-            })
-            .catch((reason) => {})
-            .finally(() => {});
+        if (!!datas && !!datas.groupName && datas.groupName.trim() !== '') {
+          this.createGroup(datas.groupName, datas.selelctUserList);
         }
+
+        if (
+          !!datas &&
+          !!datas.selectGroupList &&
+          datas.selectGroupList.length > 0
+        ) {
+          datas.selectGroupList.forEach((g) => {
+            this.addMemberToGroup(g, datas.selelctUserList);
+          });
+        }
+        resolve(false);
       } catch (error) {
         rejects(error);
       }
     });
   }
 
+  validateGroupName(groupName: string, groupList: GroupInfoDetail[]): string {
+    // const forbidden = /[\{\}\[\]\/?.;:|\)*~`!^+<>@\#$%&\\\=\(\'\"]/g.test(
+    //   groupName
+    // );
+
+    if (!groupName || !groupList) {
+      return;
+    }
+
+    const forbidden = new RegExp(
+      '[\\{\\}\\[\\]\\/?.;:|\\)*~`!^+<>@\\#$%&\\\\\\=\\(\\\'\\"|\\u00a1-' +
+        '\\u00ac|\\u00ae-\\u00ff|\\u0100-\\u017f|\\u0180-\\u024f|\\' +
+        'u1e02-\\u1ef3|\\u0259-\\u0292|\\u02b0-\\u02ff|\\u0370-\\u' +
+        '03ff|\\u1f00-\\u1fff|\\u0400-\\u04ff|\\u2013-\\u204a|\\u2' +
+        '010-\\u206f|\\u2070-\\u209f|\\u20a0-\\u20bf|\\u2100-\\u21' +
+        '4f|\\u2150-\\u218f|\\u2190-\\u21ff|\\u2200-\\u22ff|\\u230' +
+        '0-\\u23ff|\\u2460-\\u24ff|\\u2500-\\u257f|\\u2580-\\u259f' +
+        '|\\u25a0-\\u25ff|\\u2600-\\u26ff|\\u3041-\\u309f|\\u30a0-' +
+        '\\u30ff|\\u3100-\\u312f|\\u2e80-\\u2eff|\\u31c0-\\u31ef|\\' +
+        'u3000-\\u303f|\\u3200-\\u32ff|\\uff00-\\uffef|\\u3190-\\u' +
+        '319f|\\u2f00-\\u2fdf|\\u31f0-\\u31ff|\\ua4d0-\\ua4ff|\\ua' +
+        '700-\\ua71f|\\ufe50-\\ufe6f|\\ufe10-\\ufe1f|\\ua000-\\ua4' +
+        '8c|\\ua490-\\ua4cf|\\u33c2-\\u33d8]',
+      'g'
+    ).test(groupName);
+
+    const ban = this.appService.bannedGroupNames.filter(
+      (name) => name.toLowerCase() === groupName.trim().toLowerCase()
+    )[0];
+
+    if (forbidden) {
+      return this.i18nService.t('group:error.useOnlyForSpecialCharacter', {
+        specialCharacter: '-,'
+      });
+    } else if (groupName.trim().localeCompare('') === 0) {
+      return this.i18nService.t('group:error.requireInput');
+    } else if (!!ban && ban !== '') {
+      return this.i18nService.t('group:error.bannedWords', {
+        bannedWords: this.appService.bannedGroupNames.join(',')
+      });
+    } else if (
+      -1 < groupList.findIndex((g) => g.name.trim() === groupName.trim())
+    ) {
+      return this.i18nService.t('group:error.sameNameExist');
+    }
+    return null;
+  }
+
   updateBuddy(userInfo: UserInfoTypes, isFavorite: boolean): Promise<void> {
     return new Promise<void>((resolve, rejects) => {
       try {
@@ -372,58 +369,47 @@ export class AppGroupService {
       }
     });
   }
-  updateNickname(
-    userInfo: UserInfoF,
-    nickname: string,
-    rect?: any
-  ): Promise<void> {
-    return new Promise<void>((resolve, rejects) => {
-      try {
-        if (!!rect) {
-          const dialogRef = this.dialog.open(EditInlineInputDialogComponent, {
-            width: rect.width - 30 + '',
-            height: rect.height,
-            panelClass: 'ucap-edit-group-name-dialog',
-            data: {
-              type: 'NICKNAME',
-              curValue: userInfo.nickName,
-              placeholder: this.i18nService.t('group:dialog.newNickname'),
-              maxLength: 20,
-              left: rect.left + 70,
-              top: rect.top
-            }
-          });
 
-          dialogRef
-            .afterClosed()
-            .pipe(
-              take(1),
-              map((result) => {
-                if (
-                  !!result &&
-                  result.choice &&
-                  result.curValue.localeCompare(userInfo.nickName) !== 0
-                ) {
-                  this._updateNickname(userInfo.seq, result.curValue);
-                  resolve();
-                }
-              }),
-              catchError((err) => {
-                return of(err);
-              })
-            )
-            .subscribe();
-        } else {
-          if (nickname.trim().localeCompare('') === 0) {
-            nickname = ' ';
-          }
-          this._updateNickname(userInfo.seq, nickname);
-          resolve();
+  checkBuddy(buddyList: UserInfoTypes[], userInfo: UserInfoTypes): boolean {
+    const findBuddy = buddyList.filter(
+      (b) => String(b.seq) === String(userInfo.seq)
+    );
+
+    if (!findBuddy || findBuddy.length === 0) {
+      const result = this.dialog.open<
+        AlertDialogComponent,
+        AlertDialogData,
+        AlertDialogResult
+      >(AlertDialogComponent, {
+        panelClass: 'min-create-dialog',
+        data: {
+          title: this.i18nService.t('group:error.title.default'),
+          message: '닉네임은 동료만 설정할 수 있습니다.'
         }
-      } catch (error) {
-        rejects(error);
-      }
-    });
+      });
+
+      return false;
+    }
+
+    return true;
+  }
+
+  updateNickname(userInfo: UserInfoF, nickname: string) {
+    let userSeq: number;
+    try {
+      userSeq = Number(userInfo.seq);
+    } catch (error) {
+      this.logService.error(error);
+    }
+
+    this.store.dispatch(
+      BuddyActions.nickname({
+        req: {
+          userSeq,
+          nickname
+        }
+      })
+    );
   }
 
   updateIntro(info: string, type: UserInfoUpdateType) {
@@ -439,26 +425,155 @@ export class AppGroupService {
       })
     );
   }
-  private _updateNickname(userSeq: number | string, nickname: string) {
-    let userSeqf: number;
-    try {
-      userSeqf = Number(userSeq);
-    } catch (error) {
-      this.logService.error(error);
+
+  getToggleCheckForGroupList(
+    data: {
+      checked: boolean;
+      group: GroupInfoDetail;
+    },
+    selectedGroupList: GroupInfoDetail[]
+  ): GroupInfoDetail[] {
+    const i = selectedGroupList.findIndex(
+      (u) => String(u.seq) === String(data.group.seq)
+    );
+
+    if (data.checked) {
+      if (-1 === i) {
+        return [...selectedGroupList, data.group];
+      }
+    } else {
+      if (-1 < i) {
+        return selectedGroupList.filter(
+          (u) => String(u.seq) !== String(data.group.seq)
+        );
+      }
+    }
+  }
+
+  getToggleCheckGroup(
+    data: {
+      isChecked: boolean;
+      groupBuddyList: { group: GroupInfoDetail; buddyList: UserInfo[] };
+    },
+    selectedUserList: UserInfoTypes[]
+  ): UserInfoTypes[] {
+    if (!data) {
+      return null;
     }
 
-    this.store.dispatch(
-      BuddyActions.nickname({
-        req: {
-          userSeq: Number(userSeq),
-          nickname
+    if (data.isChecked) {
+      const tempList = [...selectedUserList];
+
+      data.groupBuddyList.buddyList.forEach((item) => {
+        if (
+          selectedUserList.filter(
+            (user) => String(user.seq) === String(item.seq)
+          ).length === 0
+        ) {
+          tempList.push(item);
         }
-      })
+      });
+
+      return tempList;
+    } else {
+      return selectedUserList.filter(
+        (item) =>
+          data.groupBuddyList.buddyList.filter(
+            (del) => String(del.seq) === String(item.seq)
+          ).length === 0
+      );
+    }
+  }
+
+  getToggleCheckUser(
+    datas: {
+      checked: boolean;
+      userInfo: UserInfoSS;
+    }[],
+    selectedUserList: UserInfoTypes[]
+  ): UserInfoTypes[] {
+    if (!datas || 0 === datas.length) {
+      return null;
+    }
+
+    const pushs: UserInfoSS[] = [];
+    const pops: UserInfoSS[] = [];
+
+    datas.forEach((d) => {
+      const i = selectedUserList.findIndex((u) => u.seq === d.userInfo.seq);
+      if (d.checked) {
+        if (-1 === i) {
+          pushs.push(d.userInfo);
+        }
+      } else {
+        if (-1 < i) {
+          pops.push(d.userInfo);
+        }
+      }
+    });
+
+    if (0 < pushs.length) {
+      return [...selectedUserList, ...pushs];
+    }
+
+    if (0 < pops.length) {
+      return selectedUserList.filter(
+        (u) => -1 === pops.findIndex((p) => p.seq === u.seq)
+      );
+    }
+  }
+
+  removedProfileSelection(
+    userInfo: UserInfo,
+    selectedUserList: UserInfoTypes[]
+  ): UserInfoTypes[] {
+    const i = selectedUserList.findIndex(
+      (u) => String(u.seq) === String(userInfo.seq)
     );
+
+    if (-1 < i) {
+      return selectedUserList.filter(
+        (u) => String(u.seq) !== String(userInfo.seq)
+      );
+    }
+    return undefined;
+  }
+
+  extractBuddiesFromGroups(
+    buddies: UserInfoF[],
+    groups: GroupInfoDetail[]
+  ): UserInfoF[] {
+    if (
+      !!buddies &&
+      !!groups &&
+      (buddies.length === 0 || groups.length === 0)
+    ) {
+      return;
+    }
+    const returnArr: UserInfoF[] = [];
+    const groupUserSeqs: string[] = [];
+
+    groups.map((g) => {
+      g.userSeqs.map((seq) => {
+        const find = groupUserSeqs.indexOf(seq);
+        if (find < 0) {
+          groupUserSeqs.push(seq);
+        }
+      });
+    });
+
+    buddies.map((buddy) => {
+      const find = groupUserSeqs.indexOf(String(buddy.seq));
+      if (find > -1) {
+        returnArr.push(buddy);
+      }
+    });
+
+    return returnArr;
   }
 
   private _updateMember(
-    targetGroup: GroupDetailData,
+    targetGroup: GroupInfoDetail,
     targetUserSeqs: string[]
   ) {
     this.store.dispatch(
diff --git a/src/app/services/app-native.service.ts b/src/app/services/app-native.service.ts
index d476131..aade0e5 100644
--- a/src/app/services/app-native.service.ts
+++ b/src/app/services/app-native.service.ts
@@ -1,6 +1,7 @@
-import { take } from 'rxjs/operators';
+import { Subject } from 'rxjs';
+import { take, takeUntil } from 'rxjs/operators';
 
-import { Injectable, Inject, NgZone } from '@angular/core';
+import { Injectable, Inject, NgZone, OnDestroy } from '@angular/core';
 
 import { MatDialog } from '@angular/material/dialog';
 
@@ -9,39 +10,76 @@ import { Store, select } from '@ngrx/store';
 import { NativeService } from '@ucap/native';
 
 import { UCAP_NATIVE_SERVICE } from '@ucap/ng-native';
-import { LoginSelector } from '@ucap/ng-store-authentication';
+
 import { AppAccountService } from './app-account.service';
+import { AppAuthenticationService } from './app-authentication.service';
 
 @Injectable({
   providedIn: 'root'
 })
-export class AppNativeService {
+export class AppNativeService implements OnDestroy {
+  private ngOnDestroySubject: Subject<void> = new Subject();
+
   constructor(
     @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
     private appAccountService: AppAccountService,
+    private appAuthenticationService: AppAuthenticationService,
     private store: Store<any>,
     private matDialog: MatDialog,
     private ngZone: NgZone
   ) {}
 
+  ngOnDestroy(): void {
+    if (!!this.ngOnDestroySubject) {
+      this.ngOnDestroySubject.next();
+      this.ngOnDestroySubject.complete();
+    }
+  }
+
   subscribe(): void {
-    this.nativeService.app_onLogout$().subscribe(() => {
-      this.ngZone.run(() => {
-        this.matDialog.closeAll();
+    this.nativeService
+      .app_onLogout$()
+      .pipe(takeUntil(this.ngOnDestroySubject))
+      .subscribe(() => {
+        this.ngZone.run(() => {
+          this.matDialog.closeAll();
 
-        this.store
-          .pipe(take(1), select(LoginSelector.loginRes))
-          .subscribe((loginRes) => {});
+          this.appAuthenticationService.logoutConfirm().then((choice) => {
+            if (choice) {
+              this.appAuthenticationService.logout();
+            }
+          });
+        });
       });
-    });
 
-    this.nativeService.app_onStatus$().subscribe((statusCode) => {});
+    this.nativeService
+      .app_onStatus$()
+      .pipe(takeUntil(this.ngOnDestroySubject))
+      .subscribe((statusCode) => {});
 
-    this.nativeService.app_onShowSetting$().subscribe(() => {
-      this.ngZone.run(() => {
-        // this.store.dispatch(SettingsStore.showDialog());
-        this.appAccountService.dialogForSettings();
+    this.nativeService
+      .app_onShowSetting$()
+      .pipe(takeUntil(this.ngOnDestroySubject))
+      .subscribe(() => {
+        this.ngZone.run(() => {
+          // this.store.dispatch(SettingsStore.showDialog());
+          this.appAccountService.dialogForSettings();
+        });
+      });
+
+    this.nativeService
+      .app_onExit$()
+      .pipe(takeUntil(this.ngOnDestroySubject))
+      .subscribe(() => {
+        this.ngZone.run(() => {
+          this.matDialog.closeAll();
+
+          this.appAuthenticationService.logoutConfirm().then((choice) => {
+            if (choice) {
+              this.nativeService.app_exit();
+            }
+          });
+        });
       });
-    });
   }
 }
diff --git a/src/app/services/app-notification.service.ts b/src/app/services/app-notification.service.ts
index db70825..1a6a1df 100644
--- a/src/app/services/app-notification.service.ts
+++ b/src/app/services/app-notification.service.ts
@@ -1,21 +1,25 @@
-import { of } from 'rxjs';
+import { of, Subject } from 'rxjs';
 import {
   tap,
   withLatestFrom,
   catchError,
   finalize,
   take,
-  map
+  map,
+  takeUntil
 } from 'rxjs/operators';
 
-import { Injectable, Inject, NgZone } from '@angular/core';
+import { Injectable, Inject, NgZone, OnDestroy } from '@angular/core';
 
 import { MatDialog } from '@angular/material/dialog';
 
 import { Store, select } from '@ngrx/store';
 import { Dictionary } from '@ngrx/entity';
 
-import { LocaleCode, NotificationMethod } from '@ucap/core';
+import { LocaleCode, NotificationMethod } from '@ucap/domain-common';
+import { UserInfo } from '@ucap/domain-organization';
+import { EventType } from '@ucap/domain-chat';
+
 import {
   NativeService,
   WindowState,
@@ -39,8 +43,7 @@ import {
   ReadNotification,
   CancelNotification,
   DelNotification as EventDelNotification,
-  ReadRequest as EventReadRequest,
-  EventType
+  ReadRequest as EventReadRequest
 } from '@ucap/protocol-event';
 import {
   SSVC_TYPE_INFO_USER_NOTI,
@@ -92,7 +95,6 @@ import {
   UmgNotiNotification,
   UmgDeleteNotiNotification
 } from '@ucap/protocol-umg';
-import { UserInfo } from '@ucap/protocol-sync';
 
 import { LogService } from '@ucap/ng-logger';
 import { I18nService } from '@ucap/ng-i18n';
@@ -120,14 +122,20 @@ import {
   ChatUtil
 } from '@ucap/ng-store-chat';
 import { ConfigurationSelector } from '@ucap/ng-store-authentication';
-import { CommonActions, UserSelector } from '@ucap/ng-store-organization';
+import {
+  CommonActions,
+  UserSelector,
+  PresenceActions
+} from '@ucap/ng-store-organization';
 
 import { UserStore } from '@app/models/user-store';
 
 import { AppAuthenticationService } from './app-authentication.service';
 
 @Injectable()
-export class AppNotificationService {
+export class AppNotificationService implements OnDestroy {
+  private ngOnDestroySubject: Subject<void> = new Subject();
+
   constructor(
     private authenticationProtocolService: AuthenticationProtocolService,
     private eventProtocolService: EventProtocolService,
@@ -152,9 +160,17 @@ export class AppNotificationService {
     private logService: LogService
   ) {}
 
+  ngOnDestroy(): void {
+    if (!!this.ngOnDestroySubject) {
+      this.ngOnDestroySubject.next();
+      this.ngOnDestroySubject.complete();
+    }
+  }
+
   public subscribe(): void {
     this.authenticationProtocolService.logoutNotification$
       .pipe(
+        takeUntil(this.ngOnDestroySubject),
         tap((notiOrRes) => {
           switch (notiOrRes.SSVC_TYPE) {
             case SSVC_TYPE_LOGOUT_RES:
@@ -200,9 +216,10 @@ export class AppNotificationService {
 
     this.eventProtocolService.notification$
       .pipe(
+        takeUntil(this.ngOnDestroySubject),
         withLatestFrom(
           this.store.pipe(select(UserSelector.user)),
-          this.store.pipe(select(ConfigurationSelector.versionInfo2Response)),
+          this.store.pipe(select(ConfigurationSelector.versionInfo)),
           this.store.pipe(select(ChattingSelector.activeRoomId)),
           this.store.pipe(select(RoomSelector.rooms)),
           this.store.pipe(select(RoomSelector.roomUsers)),
@@ -217,7 +234,7 @@ export class AppNotificationService {
           ([
             notiOrRes,
             user,
-            versionInfo2Res,
+            versionInfo,
             activeRoomId,
             roomList,
             roomUsers,
@@ -249,37 +266,25 @@ export class AppNotificationService {
 
                   // Unread Count..
                   let doReadRequest = false;
-                  if (!!activeRoomId && activeRoomId === roomId) {
-                    // Active room.
-                    doReadRequest = true;
-                  }
-
                   // Get Window state.
                   const windowState = this.nativeService.window_onState$()
                     .value;
                   const isWindowFocusState = this.nativeService.window_onFocus$()
                     .value;
 
-                  // // unread count..
-                  // // 현재 방이 열려 있고,
-                  // if (
-                  //   !!curRoomInfo &&
-                  //   !!curRoomInfo.roomSeq &&
-                  //   curRoomInfo.roomSeq === noti.roomSeq
-                  // ) {
-                  //   // 윈도우의 상태가 최소화, tray 상태가 아니면서 조직도탭을 보고 있지 않다면,
-                  //   if (
-                  //     !!windowState &&
-                  //     windowState.windowState !== WindowState.Minimized &&
-                  //     windowState.windowState !== WindowState.Hidden &&
-                  //     windowState.windowFocusState ===
-                  //       ElectronBrowserWindowChannel.Focus &&
-                  //     gnbMenuIndex !== MainMenu.Organization
-                  //   ) {
-                  //     // 대화방을 보고 있다고 판단하고 event_read_req 한다.
-                  //     doReadRequest = true;
-                  //   }
-                  // }
+                  // Is activate event read request.
+                  if (isWindowFocusState !== false) {
+                    // Exclude window unfocused..
+                    if (
+                      windowState !== WindowState.Minimized &&
+                      windowState !== WindowState.Hidden
+                    ) {
+                      if (!!activeRoomId && activeRoomId === roomId) {
+                        // Only Active room.
+                        doReadRequest = true;
+                      }
+                    }
+                  }
 
                   if (doReadRequest) {
                     this.store.dispatch(
@@ -322,15 +327,17 @@ export class AppNotificationService {
                       doNoti = false;
                     }
 
-                    // 현재 열려 있는 방일경우 노티 안함.
-                    if (!!activeRoomId && activeRoomId === roomId) {
+                    // Is activate event read request.
+                    if (isWindowFocusState !== false) {
+                      // Exclude window unfocused..
                       if (
-                        !!windowState &&
                         windowState !== WindowState.Minimized &&
-                        windowState !== WindowState.Hidden &&
-                        !!isWindowFocusState
+                        windowState !== WindowState.Hidden
                       ) {
-                        doNoti = false;
+                        if (!!activeRoomId && activeRoomId === roomId) {
+                          // Only Active room.
+                          doNoti = false;
+                        }
                       }
                     }
                     // // 포커스 아웃일때 무조건 노티.
@@ -433,7 +440,7 @@ export class AppNotificationService {
                                       );
                                       // Image set.
                                       if (!!senderInfo.profileImageFile) {
-                                        notiReq.image = `${versionInfo2Res.profileRoot}${senderInfo.profileImageFile}`;
+                                        notiReq.image = `${versionInfo.profileRoot}${senderInfo.profileImageFile}`;
                                       }
                                     }
                                   }),
@@ -470,7 +477,7 @@ export class AppNotificationService {
                               );
                               // Image set.
                               if (!!senderInfo.profileImageFile) {
-                                notiReq.image = `${versionInfo2Res.profileRoot}${senderInfo.profileImageFile}`;
+                                notiReq.image = `${versionInfo.profileRoot}${senderInfo.profileImageFile}`;
                               }
                               // express noti popup
                               this.nativeService.app_showNotify(notiReq);
@@ -543,6 +550,7 @@ export class AppNotificationService {
 
     this.infoProtocolService.notification$
       .pipe(
+        takeUntil(this.ngOnDestroySubject),
         tap((notiOrRes) => {
           switch (notiOrRes.SSVC_TYPE) {
             case SSVC_TYPE_INFO_USER_NOTI:
@@ -568,6 +576,7 @@ export class AppNotificationService {
 
     this.groupProtocolService.notification$
       .pipe(
+        takeUntil(this.ngOnDestroySubject),
         tap((notiOrRes) => {
           switch (notiOrRes.SSVC_TYPE) {
             case SSVC_TYPE_GROUP_UPD_RES2:
@@ -614,6 +623,7 @@ export class AppNotificationService {
 
     this.buddyProtocolService.notification$
       .pipe(
+        takeUntil(this.ngOnDestroySubject),
         tap((notiOrRes) => {
           switch (notiOrRes.SSVC_TYPE) {
             case SSVC_TYPE_BUDDY_UPD_RES:
@@ -656,6 +666,7 @@ export class AppNotificationService {
 
     this.roomProtocolService.notification$
       .pipe(
+        takeUntil(this.ngOnDestroySubject),
         withLatestFrom(this.store.pipe(select(UserSelector.user))),
         tap(([notiOrRes, user]) => {
           switch (notiOrRes.SSVC_TYPE) {
@@ -768,6 +779,7 @@ export class AppNotificationService {
 
     this.statusProtocolService.notification$
       .pipe(
+        takeUntil(this.ngOnDestroySubject),
         tap((notiOrRes) => {
           switch (notiOrRes.SSVC_TYPE) {
             case SSVC_TYPE_STATUS_NOTI:
@@ -777,11 +789,11 @@ export class AppNotificationService {
                   'Notification::statusProtocolService::StatusNotification',
                   noti
                 );
-                // this.store.dispatch(
-                //   StatusStore.statusNotification({
-                //     noti
-                //   })
-                // );
+                this.store.dispatch(
+                  PresenceActions.statusNotification({
+                    noti
+                  })
+                );
               }
               break;
             default:
@@ -793,6 +805,7 @@ export class AppNotificationService {
 
     this.optionProtocolService.notification$
       .pipe(
+        takeUntil(this.ngOnDestroySubject),
         tap((notiOrRes) => {
           switch (notiOrRes.SSVC_TYPE) {
             case SSVC_TYPE_OPTION_REG_UPD_RES:
@@ -829,6 +842,7 @@ export class AppNotificationService {
 
     this.umgProtocolService.notification$
       .pipe(
+        takeUntil(this.ngOnDestroySubject),
         tap((notiOrRes) => {
           switch (notiOrRes.SSVC_TYPE) {
             case SSVC_TYPE_UMG_NOTI:
diff --git a/src/app/services/app-organization.service.ts b/src/app/services/app-organization.service.ts
new file mode 100644
index 0000000..9aac428
--- /dev/null
+++ b/src/app/services/app-organization.service.ts
@@ -0,0 +1,50 @@
+import { of } from 'rxjs';
+import { take } from 'rxjs/operators';
+
+import { Injectable } from '@angular/core';
+
+import { Store } from '@ngrx/store';
+
+import { User, UserInfoSS } from '@ucap/domain-organization';
+
+import { QueryProtocolService } from '@ucap/ng-protocol-query';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AppOrganizationService {
+  constructor(
+    private store: Store<any>,
+    private queryProtocolService: QueryProtocolService
+  ) {}
+
+  getUserInfo(value: {
+    userSeq: string;
+    user: User;
+  }): Promise<{
+    userInfo: UserInfoSS;
+  }> {
+    return new Promise<{
+      userInfo: UserInfoSS;
+    }>(async (resolve, reject) => {
+      this.queryProtocolService
+        .dataUser({
+          divCd: 'SRCHUSER',
+          seq: Number(value.userSeq),
+          senderCompanyCode: value.user.info.companyCode,
+          senderEmployeeType: value.user.info.employeeType
+        })
+        .pipe(take(1))
+        .subscribe(
+          (dataUserRes) => {
+            resolve({
+              userInfo: dataUserRes.userInfo
+            });
+          },
+          (error) => {
+            reject(error);
+          }
+        );
+    });
+  }
+}
diff --git a/src/app/services/app-ui.service.ts b/src/app/services/app-ui.service.ts
new file mode 100644
index 0000000..cce6b26
--- /dev/null
+++ b/src/app/services/app-ui.service.ts
@@ -0,0 +1,108 @@
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+import { Injectable, OnDestroy } from '@angular/core';
+
+import { MatSidenav } from '@angular/material/sidenav';
+
+import { Store, select } from '@ngrx/store';
+
+import { AppSelector } from '@app/store/state';
+import { WindowSizeMode } from '@app/types/window-size-mode.type';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AppUiService implements OnDestroy {
+  set leftSidenav(leftSidenav: MatSidenav) {
+    this._leftSidenav = leftSidenav;
+    this._initLeftSideNav();
+  }
+  // tslint:disable-next-line: variable-name
+  _leftSidenav: MatSidenav;
+
+  // tslint:disable-next-line: variable-name
+  private _windowSizeMode: WindowSizeMode;
+
+  private ngOnDestroySubject: Subject<void> = new Subject();
+
+  constructor(private store: Store<any>) {
+    this.store
+      .pipe(
+        takeUntil(this.ngOnDestroySubject),
+        select(AppSelector.windowSizeMode)
+      )
+      .subscribe((windowSizeMode) => {
+        this._windowSizeMode = windowSizeMode;
+
+        this._initLeftSideNav();
+      });
+  }
+
+  ngOnDestroy(): void {
+    if (!!this.ngOnDestroySubject) {
+      this.ngOnDestroySubject.next();
+      this.ngOnDestroySubject.complete();
+    }
+  }
+
+  openLeftSidenavOnNarrowMode() {
+    if (!this._leftSidenav) {
+      return;
+    }
+    if (WindowSizeMode.narrow !== this._windowSizeMode) {
+      return;
+    }
+    if (this._leftSidenav.opened) {
+      return;
+    }
+    this._leftSidenav.open();
+  }
+
+  closeLeftSidenavOnNarrowMode() {
+    if (!this._leftSidenav) {
+      return;
+    }
+    if (WindowSizeMode.narrow !== this._windowSizeMode) {
+      return;
+    }
+    if (!this._leftSidenav.opened) {
+      return;
+    }
+    this._leftSidenav.close();
+  }
+
+  toggleLeftSidenavOnNarrowMode() {
+    if (!this._leftSidenav) {
+      return;
+    }
+    if (WindowSizeMode.narrow !== this._windowSizeMode) {
+      return;
+    }
+    if (this._leftSidenav.opened) {
+      this._leftSidenav.close();
+    } else {
+      this._leftSidenav.open();
+    }
+  }
+
+  private _initLeftSideNav() {
+    if (!!this._leftSidenav && !!this._windowSizeMode) {
+      switch (this._windowSizeMode) {
+        case WindowSizeMode.narrow:
+          if (this._leftSidenav.opened) {
+            this._leftSidenav.close();
+          }
+          this._leftSidenav.mode = 'over';
+
+          break;
+        default:
+          if (!this._leftSidenav.opened) {
+            this._leftSidenav.open();
+          }
+          this._leftSidenav.mode = 'side';
+          break;
+      }
+    }
+  }
+}
diff --git a/src/app/services/app.service.ts b/src/app/services/app.service.ts
index 3678899..bd510eb 100644
--- a/src/app/services/app.service.ts
+++ b/src/app/services/app.service.ts
@@ -4,14 +4,14 @@ import { Store } from '@ngrx/store';
 
 import * as detectBrowser from 'detect-browser';
 
-import { DeviceType, DesktopType } from '@ucap/core';
+import { DeviceType, DesktopType } from '@ucap/domain-common';
 import { NativeService, NativeType } from '@ucap/native';
 
 import { I18nService } from '@ucap/ng-i18n';
 import { LogService } from '@ucap/ng-logger';
 import { UCAP_NATIVE_SERVICE } from '@ucap/ng-native';
 import { PingProtocolService } from '@ucap/ng-protocol-ping';
-import { DateService } from '@ucap/ng-ui';
+import { DateService } from '@ucap/ng-ui/date';
 import { TranslateService } from '@ucap/ng-ui-organization';
 import { ProtocolService } from '@ucap/ng-protocol';
 import { LoginActions } from '@ucap/ng-store-authentication';
@@ -21,7 +21,8 @@ import { environment } from '@environments';
 import { AppAuthenticationService } from './app-authentication.service';
 import { AppNotificationService } from './app-notification.service';
 import { GroupOpenInfo } from '@app/models/group-open-info';
-import { GroupDetailData } from '@ucap/protocol-sync';
+import { AppNativeService } from './app-native.service';
+import { AppChatService } from './app-chat.service';
 
 @Injectable()
 export class AppService {
@@ -35,7 +36,9 @@ export class AppService {
     private protocolService: ProtocolService,
     private pingProtocolService: PingProtocolService,
     private appAuthenticationService: AppAuthenticationService,
+    private appNativeService: AppNativeService,
     private appNotificationService: AppNotificationService,
+    private appChatService: AppChatService,
     private logService: LogService,
     private store: Store<any>,
     @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService
@@ -121,8 +124,8 @@ export class AppService {
           const langs = ['en', 'ko'];
           const bannedNameKeys = [
             'category.favorite',
-            'category.default',
-            'category.myDept'
+            'category.default'
+            // 'category.myDept'
           ];
 
           langs.map((lang) => {
@@ -157,6 +160,15 @@ export class AppService {
       }
     });
 
+    const initChat = new Promise<void>(async (resolve, reject) => {
+      try {
+        this.appChatService.subscribe();
+        resolve();
+      } catch (error) {
+        reject(error);
+      }
+    });
+
     const initProtocol = new Promise<void>(async (resolve, reject) => {
       try {
         this.protocolService.connected$.subscribe((connected) => {
@@ -169,7 +181,7 @@ export class AppService {
               .then((result) => {
                 this.store.dispatch(
                   LoginActions.sessionCreated({
-                    res: result.loginRes,
+                    loginInfo: result.loginInfo,
                     loginSession: result.loginSession
                   })
                 );
@@ -189,6 +201,15 @@ export class AppService {
       }
     });
 
+    const initNative = new Promise<void>(async (resolve, reject) => {
+      try {
+        this.appNativeService.subscribe();
+        resolve();
+      } catch (error) {
+        reject(error);
+      }
+    });
+
     const initNotification = new Promise<void>(async (resolve, reject) => {
       try {
         this.appNotificationService.subscribe();
@@ -199,39 +220,14 @@ export class AppService {
     });
 
     return Promise.all([
-      initSession,
+      initApp,
       initI18n,
-      initOrganization,
+      initNative,
       initProtocol,
       initNotification,
-      initApp
+      initSession,
+      initOrganization,
+      initChat
     ]);
   }
-
-  validateGroupName(groupName: string, groupList: GroupDetailData[]): string {
-    const forbidden = /[\{\}\[\]\/?.;:|\)*~`!^+<>@\#$%&\\\=\(\'\"]/g.test(
-      groupName
-    );
-
-    const ban = this.bannedGroupNames.filter(
-      (name) => name.toLowerCase() === groupName.trim().toLowerCase()
-    )[0];
-
-    if (forbidden) {
-      return this.i18nService.t('group:error.useOnlyForSpecialCharacter', {
-        specialCharacter: '-,'
-      });
-    } else if (groupName.trim().localeCompare('') === 0) {
-      return this.i18nService.t('group:error.requireInput');
-    } else if (!!ban && ban !== '') {
-      return this.i18nService.t('group:error.bannedWords', {
-        bannedWords: this.bannedGroupNames.join(',')
-      });
-    } else if (
-      -1 < groupList.findIndex((g) => g.name.trim() === groupName.trim())
-    ) {
-      return this.i18nService.t('group:error.sameNameExist');
-    }
-    return null;
-  }
 }
diff --git a/src/app/store/app/actions.ts b/src/app/store/app/actions.ts
index 44efcc4..67bd84e 100644
--- a/src/app/store/app/actions.ts
+++ b/src/app/store/app/actions.ts
@@ -1,4 +1,5 @@
 import { createAction, props } from '@ngrx/store';
+import { WindowSizeMode } from '@app/types/window-size-mode.type';
 
 export const init = createAction('[ucap::LG::app] init');
 
@@ -7,7 +8,17 @@ export const windowResized = createAction(
   props<{ width: number; height: number }>()
 );
 
+export const windowSizeModeChanged = createAction(
+  '[ucap::LG::app] windowSizeModeChanged',
+  props<{ windowSizeMode: WindowSizeMode }>()
+);
+
 export const idleTimeChanged = createAction(
   '[ucap::LG::app] idleTimeChanged',
   props<{ idleTime: number }>()
 );
+
+export const openedLiftSideNav = createAction(
+  '[ucap::LG::app] openedLiftSideNav',
+  props<{ opened: boolean }>()
+);
diff --git a/src/app/store/app/effects.ts b/src/app/store/app/effects.ts
index 2d2bbb4..858f33a 100644
--- a/src/app/store/app/effects.ts
+++ b/src/app/store/app/effects.ts
@@ -1,15 +1,25 @@
 import { Subject } from 'rxjs';
-import { tap, takeUntil } from 'rxjs/operators';
+import { tap } from 'rxjs/operators';
 
 import { Injectable, Inject } from '@angular/core';
 
+import { Store } from '@ngrx/store';
 import { Actions, createEffect, ofType } from '@ngrx/effects';
 
 import { NativeService } from '@ucap/native';
 
 import { UCAP_NATIVE_SERVICE } from '@ucap/ng-native';
 import { LoginActions } from '@ucap/ng-store-authentication';
-import { idleTimeChanged } from './actions';
+
+import { WindowSizeMode } from '@app/types/window-size-mode.type';
+
+import { environment } from '@environments';
+
+import {
+  idleTimeChanged,
+  windowResized,
+  windowSizeModeChanged
+} from './actions';
 
 @Injectable()
 export class Effects {
@@ -73,10 +83,48 @@ export class Effects {
     { dispatch: false }
   );
 
+  windowResized$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType(windowResized),
+        tap((action) => {
+          const width = action.width;
+
+          if (environment.productConfig.windowSizeMode.narrow > width) {
+            // narrow mode
+            this.store.dispatch(
+              windowSizeModeChanged({
+                windowSizeMode: WindowSizeMode.narrow
+              })
+            );
+          } else if (
+            environment.productConfig.windowSizeMode.narrow <= width &&
+            environment.productConfig.windowSizeMode.normal > width
+          ) {
+            // normal mode
+            this.store.dispatch(
+              windowSizeModeChanged({
+                windowSizeMode: WindowSizeMode.normal
+              })
+            );
+          } else {
+            // wide mode
+            this.store.dispatch(
+              windowSizeModeChanged({
+                windowSizeMode: WindowSizeMode.wide
+              })
+            );
+          }
+        })
+      ),
+    { dispatch: false }
+  );
+
   private logoutSubject: Subject<void>;
 
   constructor(
     private actions$: Actions,
+    private store: Store<any>,
     @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService
   ) {}
 }
diff --git a/src/app/store/app/reducers.ts b/src/app/store/app/reducers.ts
index 0601c79..ae672f0 100644
--- a/src/app/store/app/reducers.ts
+++ b/src/app/store/app/reducers.ts
@@ -1,6 +1,10 @@
 import { createReducer, on } from '@ngrx/store';
 import { initialState } from './state';
-import { windowResized } from './actions';
+import {
+  windowResized,
+  windowSizeModeChanged,
+  openedLiftSideNav
+} from './actions';
 
 export const reducer = createReducer(
   initialState,
@@ -12,5 +16,17 @@ export const reducer = createReducer(
         height: action.height
       }
     };
+  }),
+  on(windowSizeModeChanged, (state, action) => {
+    return {
+      ...state,
+      windowSizeMode: action.windowSizeMode
+    };
+  }),
+  on(openedLiftSideNav, (state, action) => {
+    return {
+      ...state,
+      openedLeftSideNav: action.opened
+    };
   })
 );
diff --git a/src/app/store/app/state.ts b/src/app/store/app/state.ts
index 24978b0..c2ae203 100644
--- a/src/app/store/app/state.ts
+++ b/src/app/store/app/state.ts
@@ -1,21 +1,35 @@
 import { Selector, createSelector } from '@ngrx/store';
 
+import { WindowSizeMode } from '@app/types/window-size-mode.type';
+
 export interface State {
   windowSize: {
     width: number;
     height: number;
   };
+  windowSizeMode: WindowSizeMode;
+  openedLeftSideNav: boolean;
 }
 
 export const initialState: State = {
   windowSize: {
     width: 0,
     height: 0
-  }
+  },
+  windowSizeMode: WindowSizeMode.normal,
+  openedLeftSideNav: false
 };
 
 export function selectors<S>(selector: Selector<any, State>) {
   return {
-    windowSize: createSelector(selector, (state: State) => state.windowSize)
+    windowSize: createSelector(selector, (state: State) => state.windowSize),
+    windowSizeMode: createSelector(
+      selector,
+      (state: State) => state.windowSizeMode
+    ),
+    openedLeftSideNav: createSelector(
+      selector,
+      (state: State) => state.openedLeftSideNav
+    )
   };
 }
diff --git a/src/app/store/authentication/effects.ts b/src/app/store/authentication/effects.ts
index 5ec07ab..02147c8 100644
--- a/src/app/store/authentication/effects.ts
+++ b/src/app/store/authentication/effects.ts
@@ -6,7 +6,7 @@ import { Router } from '@angular/router';
 
 import { Actions, createEffect, ofType } from '@ngrx/effects';
 
-import { LoginTry } from '@ucap/pi';
+import { LoginTry } from '@ucap/domain-authentication';
 
 import { NativeService } from '@ucap/native';
 
diff --git a/src/app/store/room/actions.ts b/src/app/store/room/actions.ts
index 2437cb6..025eeb0 100644
--- a/src/app/store/room/actions.ts
+++ b/src/app/store/room/actions.ts
@@ -1,3 +1,8 @@
 import { createAction, props } from '@ngrx/store';
 
 export const initializer = createAction('[ucap::app::chat:room] initializer');
+
+export const setHistoryRoomId = createAction(
+  '[ucap::LG::room] setHistoryRoomId',
+  props<{ historyRoomId: string }>()
+);
diff --git a/src/app/store/room/effects.ts b/src/app/store/room/effects.ts
index 841c165..2619262 100644
--- a/src/app/store/room/effects.ts
+++ b/src/app/store/room/effects.ts
@@ -1,7 +1,7 @@
-import { map, tap } from 'rxjs/operators';
+import { map, tap, withLatestFrom } from 'rxjs/operators';
 
 import { Injectable, Inject } from '@angular/core';
-import { Router } from '@angular/router';
+import { Router, NavigationEnd, PRIMARY_OUTLET } from '@angular/router';
 
 import { Actions, createEffect, ofType } from '@ngrx/effects';
 
@@ -11,10 +11,13 @@ import { LogService } from '@ucap/ng-logger';
 
 import { UCAP_NATIVE_SERVICE } from '@ucap/ng-native';
 
-import { environment } from '@environments';
-import { RoomActions } from '@ucap/ng-store-chat';
+import { RoomActions, ChattingSelector } from '@ucap/ng-store-chat';
 
-import { Store } from '@ngrx/store';
+import { Store, select } from '@ngrx/store';
+import { SessionStorageService } from '@ucap/ng-web-storage';
+import { AppKey } from '@app/types';
+import { AppRoomSelector } from '../state';
+import { AppChatService } from '@app/services/app-chat.service';
 
 @Injectable()
 export class Effects {
@@ -67,13 +70,24 @@ export class Effects {
     () => {
       return this.actions$.pipe(
         ofType(RoomActions.clearSelectedRoom),
-        tap(() => {
-          this.router.navigate([
-            'chat',
-            {
-              outlets: { content: 'index' }
+        withLatestFrom(this.store.pipe(select(AppRoomSelector.historyRoomId))),
+        tap(([action, historyRoomId]) => {
+          // HistoryRoomId clear.
+          if (action.roomId === historyRoomId) {
+            this.appChatService.setHistoryRoomId(null);
+
+            let isChatMenu = this.router.url.startsWith('/chat/');
+
+            if (!!isChatMenu) {
+              // chat navigation init.
+              this.router.navigate([
+                'chat',
+                {
+                  outlets: { content: 'index' }
+                }
+              ]);
             }
-          ]);
+          }
         })
       );
     },
@@ -83,6 +97,7 @@ export class Effects {
   constructor(
     private actions$: Actions,
     private store: Store<any>,
+    private appChatService: AppChatService,
     @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
     private router: Router,
     private logService: LogService
diff --git a/src/app/store/room/reducers.ts b/src/app/store/room/reducers.ts
index c02394c..bce4fe8 100644
--- a/src/app/store/room/reducers.ts
+++ b/src/app/store/room/reducers.ts
@@ -1,5 +1,14 @@
 import { createReducer, on } from '@ngrx/store';
 
 import { initialState } from './state';
+import { setHistoryRoomId } from './actions';
 
-export const reducer = createReducer(initialState);
+export const reducer = createReducer(
+  initialState,
+  on(setHistoryRoomId, (state, action) => {
+    return {
+      ...state,
+      historyRoomId: action.historyRoomId
+    };
+  })
+);
diff --git a/src/app/store/room/state.ts b/src/app/store/room/state.ts
index 1e05bd0..a8bdeb0 100644
--- a/src/app/store/room/state.ts
+++ b/src/app/store/room/state.ts
@@ -1,9 +1,18 @@
 import { Selector, createSelector } from '@ngrx/store';
 
-export interface State {}
+export interface State {
+  historyRoomId: string;
+}
 
-export const initialState: State = {};
+export const initialState: State = {
+  historyRoomId: null
+};
 
 export function selectors<S>(selector: Selector<any, State>) {
-  return {};
+  return {
+    historyRoomId: createSelector(
+      selector,
+      (state: State) => state.historyRoomId
+    )
+  };
 }
diff --git a/src/app/store/state.ts b/src/app/store/state.ts
index 9c4f2cd..d4c0ad6 100644
--- a/src/app/store/state.ts
+++ b/src/app/store/state.ts
@@ -27,3 +27,6 @@ export const AppSelector = AppState.selectors((state: State) => state.app);
 export const AppAuthenticationSelector = AppAuthenticationState.selectors(
   (state: State) => state.appAuthentication
 );
+export const AppRoomSelector = AppRoomState.selectors(
+  (state: State) => state.appRoom
+);
diff --git a/src/app/types/app-key.type.ts b/src/app/types/app-key.type.ts
index c3cb5c7..dc701eb 100644
--- a/src/app/types/app-key.type.ts
+++ b/src/app/types/app-key.type.ts
@@ -2,6 +2,5 @@ export enum AppKey {
   LoginTry = 'ucap::LG::LOGIN_TRY',
   LoginSession = 'ucap::LG::LOGIN_SESSION',
   LogoutSession = 'ucap::LG::LOGOUT_SESSION',
-  UserStore = 'ucap::LG::USER_STORE',
-  HistoryRoomId = 'ucap::LG::HISTORY_ROOMID'
+  UserStore = 'ucap::LG::USER_STORE'
 }
diff --git a/src/app/types/index.ts b/src/app/types/index.ts
index d0f1046..cddf7ac 100644
--- a/src/app/types/index.ts
+++ b/src/app/types/index.ts
@@ -3,3 +3,4 @@ export * from './select-user.dialog.type';
 export * from './tokens';
 export * from './group-manage.type';
 export * from './user.type';
+export * from './navigation.type';
diff --git a/src/app/types/navigation.type.ts b/src/app/types/navigation.type.ts
new file mode 100644
index 0000000..d6fcc3c
--- /dev/null
+++ b/src/app/types/navigation.type.ts
@@ -0,0 +1,8 @@
+export enum NavigationType {
+  Group = 'group',
+  Chat = 'chat',
+  Organization = 'organization',
+  Message = 'message',
+  Call = 'call',
+  VideoConference = 'videoConference'
+}
diff --git a/src/app/types/user.type.ts b/src/app/types/user.type.ts
index f9bed1d..7200846 100644
--- a/src/app/types/user.type.ts
+++ b/src/app/types/user.type.ts
@@ -1,9 +1,13 @@
-import { UserInfo } from '@ucap/protocol-sync';
-import { UserInfoSS, UserInfoF, UserInfoDN } from '@ucap/protocol-query';
+import {
+  UserInfo,
+  UserInfoSS,
+  UserInfoF,
+  UserInfoDN
+} from '@ucap/domain-organization';
 import {
   UserInfo as RoomUserInfo,
   UserInfoShort as RoomUserInfoShort
-} from '@ucap/protocol-room';
+} from '@ucap/domain-chat';
 
 export type UserInfoTypes =
   | UserInfo
diff --git a/src/app/types/window-size-mode.type.ts b/src/app/types/window-size-mode.type.ts
new file mode 100644
index 0000000..0044a57
--- /dev/null
+++ b/src/app/types/window-size-mode.type.ts
@@ -0,0 +1,5 @@
+export enum WindowSizeMode {
+  narrow = 'narrow',
+  normal = 'normal',
+  wide = 'wide'
+}
diff --git a/src/app/ucap/authentication/authentication.module.ts b/src/app/ucap/authentication/authentication.module.ts
index 91a2f9a..4e497c5 100644
--- a/src/app/ucap/authentication/authentication.module.ts
+++ b/src/app/ucap/authentication/authentication.module.ts
@@ -5,14 +5,17 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { FlexLayoutModule } from '@angular/flex-layout';
 
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
 
 import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 
 import { I18nModule, UCAP_I18N_NAMESPACE } from '@ucap/ng-i18n';
-import { UiModule } from '@ucap/ng-ui';
+// import { UiModule } from '@ucap/ng-ui';
 import { AuthenticationUiModule } from '@ucap/ng-ui-authentication';
 
 import { COMPONENTS } from './components';
+import { MatButtonModule } from '@angular/material/button';
 
 @NgModule({
   imports: [
@@ -22,10 +25,13 @@ import { COMPONENTS } from './components';
     FlexLayoutModule,
 
     MatCheckboxModule,
+    MatIconModule,
+    MatInputModule,
+    MatButtonModule,
 
     PerfectScrollbarModule,
     I18nModule,
-    UiModule,
+
     AuthenticationUiModule
   ],
   exports: [...COMPONENTS],
diff --git a/src/app/ucap/authentication/components/change-password.component.html b/src/app/ucap/authentication/components/change-password.component.html
new file mode 100644
index 0000000..d686c99
--- /dev/null
+++ b/src/app/ucap/authentication/components/change-password.component.html
@@ -0,0 +1,103 @@
+<div class="change-password-container ucap-mat-input-container">
+  <div class="secret-num-settings-area">
+    <div class="title-settings-subject">
+      {{ 'authentication:password.fields.changePassword' | ucapI18n }}
+    </div>
+    <div class="settings-contents">
+      <div class="subtitle-settings-info">
+        {{ 'authentication:password.fields.currentPassword' | ucapI18n }}
+      </div>
+      <div class="settings-sub-content">
+        <mat-form-field class="setting-input-obj ucap-mat-input-container">
+          <mat-label>{{
+            'authentication:password.placeholder.currentPassword' | ucapI18n
+          }}</mat-label>
+          <input matInput #oldPW value="" />
+          <button
+            mat-button
+            matSuffix
+            mat-icon-button
+            aria-label="action"
+            [ngClass]="oldPW.value == '' ? 'hide' : ''"
+          >
+            <mat-icon>done</mat-icon>
+          </button>
+          <mat-hint>Hint</mat-hint>
+        </mat-form-field>
+      </div>
+    </div>
+    <div class="settings-contents">
+      <div class="subtitle-settings-info">
+        {{ 'authentication:password.fields.newPassword' | ucapI18n }}
+      </div>
+      <div class="settings-sub-content">
+        <mat-form-field class="setting-input-obj ucap-mat-input-container">
+          <mat-label>{{
+            'authentication:password.placeholder.newPassword' | ucapI18n
+          }}</mat-label>
+          <input matInput #newPW1 value="" />
+          <button
+            mat-button
+            matSuffix
+            mat-icon-button
+            aria-label="action"
+            [ngClass]="newPW1.value == '' ? 'hide' : ''"
+          >
+            <mat-icon>done</mat-icon>
+          </button>
+          <mat-hint
+            >반드시 영어 소문자, 숫자, 특수문자 중 2가지 이상 사용해야
+            합니다.</mat-hint
+          >
+        </mat-form-field>
+
+        <mat-form-field
+          color="accent"
+          class="setting-input-obj ucap-mat-input-container"
+        >
+          <mat-label>{{
+            'authentication:password.placeholder.newPasswordConfirm' | ucapI18n
+          }}</mat-label>
+          <input matInput #newPW2 value="" />
+          <button
+            mat-button
+            matSuffix
+            mat-icon-button
+            color="accent"
+            aria-label="action"
+            [ngClass]="newPW2.value == '' ? 'hide' : ''"
+          >
+            <mat-icon class="mat-icon">done</mat-icon>
+          </button>
+          <mat-error>Error</mat-error>
+        </mat-form-field>
+      </div>
+    </div>
+
+    <div class="pass-info-box">
+      <dl>
+        <dt>
+          <mat-icon color="accent" class="bullet-ico-info"
+            >info_outline</mat-icon
+          >
+          {{ 'authentication:password.notice.condition' | ucapI18n }}
+        </dt>
+        <dd>
+          {{ 'authentication:password.notice.condition1' | ucapI18n }}
+        </dd>
+        <dd>
+          {{ 'authentication:password.notice.condition2' | ucapI18n }}
+        </dd>
+        <dd>
+          {{ 'authentication:password.notice.condition3' | ucapI18n }}
+        </dd>
+        <dd>
+          {{ 'authentication:password.notice.condition4' | ucapI18n }}
+        </dd>
+        <dd>
+          {{ 'authentication:password.notice.condition5' | ucapI18n }}
+        </dd>
+      </dl>
+    </div>
+  </div>
+</div>
diff --git a/src/app/ucap/authentication/components/change-password.component.scss b/src/app/ucap/authentication/components/change-password.component.scss
new file mode 100644
index 0000000..8411453
--- /dev/null
+++ b/src/app/ucap/authentication/components/change-password.component.scss
@@ -0,0 +1,140 @@
+@import '~@ucap/lg-scss/mixins';
+
+.change-password-container {
+  border-top: 10px solid #f1f2f6;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: 10px 16px;
+  &:first-of-type {
+    border-top: 0;
+    padding: 20px 16px 10px;
+  }
+  .secret-num-settings-area {
+    .title-settings-subject {
+      color: #5c444b;
+      font-size: 1.071em;
+      font-weight: 600;
+      line-height: 1.2;
+      padding: 6px 0;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      min-height: 30px;
+      span {
+        flex: 0 0 auto;
+      }
+      em {
+        flex: 0 1 auto;
+        justify-self: start;
+        font-style: normal;
+        font-size: 0.929em;
+        color: #999;
+        font-weight: 400;
+        @include wordBreak();
+        @include ellipsis-column(1);
+        width: 100%;
+      }
+      .btn-subject-info {
+        width: 30px;
+        height: 30px;
+        line-height: 30px;
+        font-size: 18px;
+      }
+    }
+    .settings-contents {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      margin-top: 25px;
+      @include screen(xs) {
+        flex-direction: column;
+      }
+      .subtitle-settings-info {
+        font-size: 0.929em;
+        color: #262626;
+        align-self: baseline;
+        @include screen(xs) {
+          flex: 1 0 auto;
+        }
+      }
+      .settings-sub-content {
+        display: flex;
+        flex-direction: column;
+        margin-left: 25px;
+        width: 60%;
+        @include screen(xs) {
+          flex: 0 1 auto;
+          width: 100% !important;
+          margin-left: 0;
+        }
+        .setting-input-obj {
+          @include ucapMatFormField(0, 0, 0%, 100%, 100%, 60px, 11px);
+          overflow: hidden;
+          margin-top: 15px;
+          &:first-of-type {
+            margin-top: 0;
+            @include screen(xs) {
+              margin-top: 15px;
+            }
+          }
+          button {
+            &.hide {
+              display: none;
+            }
+            display: block;
+            align-self: center;
+          }
+          .mat-hint {
+            line-height: 1.3;
+          }
+        }
+        &.sub-set-content {
+          width: auto;
+          flex: 1 1 auto;
+          .input-set-obj {
+            @include ucapMatFormField(0, 0, 0%, 100%, 100%, 55px, 11px);
+          }
+        }
+      }
+    }
+
+    .pass-info-box {
+      dl {
+        border: 1px solid #dfe0e8;
+        background-color: #f7f8fa;
+        dt {
+          height: 30px;
+          background-color: #fff;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          font-size: 0.857em;
+          font-weight: 600;
+          .bullet-ico-info {
+            flex: 0 0 36px;
+            text-align: center;
+            font-size: 16px;
+            width: 30px;
+            height: 30px;
+            line-height: 30px;
+          }
+        }
+        dd {
+          font-size: 0.857em;
+          color: #666;
+          line-height: 1.6;
+          margin: 2px 36px 3px;
+          &:first-of-type {
+            margin-top: 10px;
+          }
+          &:last-of-type {
+            margin-bottom: 10px;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/app/ucap/authentication/components/change-password.component.spec.ts b/src/app/ucap/authentication/components/change-password.component.spec.ts
new file mode 100644
index 0000000..4ae0933
--- /dev/null
+++ b/src/app/ucap/authentication/components/change-password.component.spec.ts
@@ -0,0 +1,32 @@
+import { TestBed, async } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { ChangePasswordComponent } from './change-password.component';
+
+describe('app::ucap::authentication::ChangePasswordComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [RouterTestingModule],
+      declarations: [ChangePasswordComponent]
+    }).compileComponents();
+  }));
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(ChangePasswordComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'ucap-lg-web'`, () => {
+    const fixture = TestBed.createComponent(ChangePasswordComponent);
+    const app = fixture.componentInstance;
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(ChangePasswordComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement;
+    expect(compiled.querySelector('.content span').textContent).toContain(
+      'ucap-lg-web app is running!'
+    );
+  });
+});
diff --git a/src/app/ucap/authentication/components/change-password.component.ts b/src/app/ucap/authentication/components/change-password.component.ts
new file mode 100644
index 0000000..12aa73b
--- /dev/null
+++ b/src/app/ucap/authentication/components/change-password.component.ts
@@ -0,0 +1,24 @@
+import { Subject } from 'rxjs';
+import { take, takeUntil } from 'rxjs/operators';
+
+import { Component, OnInit, OnDestroy } from '@angular/core';
+
+@Component({
+  selector: 'app-authentication-change-password',
+  templateUrl: './change-password.component.html',
+  styleUrls: ['./change-password.component.scss']
+})
+export class ChangePasswordComponent implements OnInit, OnDestroy {
+  private ngOnDestroySubject: Subject<void> = new Subject();
+
+  constructor() {}
+
+  ngOnInit(): void {}
+
+  ngOnDestroy(): void {
+    if (!!this.ngOnDestroySubject) {
+      this.ngOnDestroySubject.next();
+      this.ngOnDestroySubject.complete();
+    }
+  }
+}
diff --git a/src/app/ucap/authentication/components/index.ts b/src/app/ucap/authentication/components/index.ts
index d555737..e2f9e42 100644
--- a/src/app/ucap/authentication/components/index.ts
+++ b/src/app/ucap/authentication/components/index.ts
@@ -1,3 +1,4 @@
+import { ChangePasswordComponent } from './change-password.component';
 import { LoginComponent } from './login.component';
 
-export const COMPONENTS = [LoginComponent];
+export const COMPONENTS = [ChangePasswordComponent, LoginComponent];
diff --git a/src/app/ucap/authentication/components/login.component.scss b/src/app/ucap/authentication/components/login.component.scss
index 02107ff..0118cd9 100644
--- a/src/app/ucap/authentication/components/login.component.scss
+++ b/src/app/ucap/authentication/components/login.component.scss
@@ -19,10 +19,10 @@
         margin-bottom: 7px;
         vertical-align: top;
         @include screen(mid) {
-          width: 120px;
+          width: 8em;
         }
         @include screen(xs) {
-          width: 100px;
+          width: 7em;
           margin-bottom: 6px;
         }
       }
diff --git a/src/app/ucap/authentication/components/login.component.ts b/src/app/ucap/authentication/components/login.component.ts
index e4e7314..a4c9ddf 100644
--- a/src/app/ucap/authentication/components/login.component.ts
+++ b/src/app/ucap/authentication/components/login.component.ts
@@ -7,8 +7,9 @@ import { MatCheckbox } from '@angular/material/checkbox';
 
 import { Store, select } from '@ngrx/store';
 
-import { Company } from '@ucap/api-external';
-import { LoginTry } from '@ucap/pi';
+import { Company } from '@ucap/domain-organization';
+import { LoginTry } from '@ucap/domain-authentication';
+
 import { NativeService } from '@ucap/native';
 
 import { UCAP_NATIVE_SERVICE } from '@ucap/ng-native';
diff --git a/src/app/ucap/call/call.module.ts b/src/app/ucap/call/call.module.ts
new file mode 100644
index 0000000..aa3df67
--- /dev/null
+++ b/src/app/ucap/call/call.module.ts
@@ -0,0 +1,82 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import { FlexLayoutModule } from '@angular/flex-layout';
+
+import { MatRippleModule } from '@angular/material/core';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+
+import { I18nModule, UCAP_I18N_NAMESPACE } from '@ucap/ng-i18n';
+
+import { UiCoreModule } from '@ucap/ng-ui/core';
+import { UiDateModule } from '@ucap/ng-ui/date';
+
+import { GroupUiModule } from '@ucap/ng-ui-group';
+import { OrganizationUiModule } from '@ucap/ng-ui-organization';
+import { ChatUiModule } from '@ucap/ng-ui-chat';
+import { CallUiModule } from '@ucap/ng-ui-call';
+
+import { COMPONENTS } from './components';
+import { AppLayoutsModule } from '@app/layouts/layouts.module';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatSliderModule } from '@angular/material/slider';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatButtonModule } from '@angular/material/button';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { AppGroupModule } from '../group/group.module';
+import { AppChatModule } from '../chat/chat.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    FlexLayoutModule,
+
+    MatCheckboxModule,
+    MatRippleModule,
+    MatIconModule,
+    MatProgressBarModule,
+    MatSliderModule,
+    MatSlideToggleModule,
+    MatTooltipModule,
+    MatTabsModule,
+    MatSelectModule,
+    MatButtonModule,
+    MatRadioModule,
+    MatFormFieldModule,
+    MatInputModule,
+
+    I18nModule,
+
+    UiCoreModule,
+    UiDateModule,
+
+    CallUiModule,
+    OrganizationUiModule,
+
+    GroupUiModule,
+    ChatUiModule,
+
+    AppChatModule,
+    AppGroupModule,
+    AppLayoutsModule
+  ],
+  exports: [...COMPONENTS],
+  declarations: [...COMPONENTS],
+  entryComponents: [],
+  providers: [
+    {
+      provide: UCAP_I18N_NAMESPACE,
+      useValue: ['call', 'common']
+    }
+  ]
+})
+export class AppCallModule {}
diff --git a/src/app/ucap/call/components/history-expansion.component.html b/src/app/ucap/call/components/history-expansion.component.html
new file mode 100644
index 0000000..e508a46
--- /dev/null
+++ b/src/app/ucap/call/components/history-expansion.component.html
@@ -0,0 +1,137 @@
+<div class="call-history-list-progressbar">
+  <mat-progress-bar mode="query" *ngIf="processing"></mat-progress-bar>
+</div>
+<div class="history-expansion-container">
+  <ng-container *ngIf="!!itemList && itemList.length > 0; else empty">
+    <ucap-call-history-expansion [historyGroup]="historyGroup" vsItemSize="60">
+      <ng-template ucapCallHistoryExpansionNode let-node>
+        <app-call-history-list-item-01
+          [historyInfo]="node.historyInfo"
+          [useFAB]="true"
+          (click)="onClickHistory($event, node.historyInfo)"
+        ></app-call-history-list-item-01>
+      </ng-template>
+
+      <ng-template ucapCallHistoryExpansionHeader let-node>
+        <span class="header-buddy">
+          <span
+            >{{ node.nodeType | ucapDate: 'LL' }}
+            {{ node.nodeType | ucapDate: 'dddd' }}</span
+          >
+        </span>
+      </ng-template>
+    </ucap-call-history-expansion>
+  </ng-container>
+  <ng-template #empty>
+    <div *ngIf="!processing" class="empty">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="140"
+        height="120"
+        viewBox="0 0 140 120"
+      >
+        <g transform="translate(-138 -150)">
+          <g transform="rotate(-45 190.686 137.36)">
+            <g class="empty-fix-1" transform="translate(158.036 232.908)">
+              <rect width="10" height="27" class="empty-fix-7" rx="5" />
+              <rect
+                width="7"
+                height="24"
+                x="1.5"
+                y="1.5"
+                class="empty-fix-5"
+                rx="3.5"
+              />
+            </g>
+            <g class="empty-fix-1" transform="translate(153.414 245.799)">
+              <rect
+                width="20.657"
+                height="31"
+                class="empty-fix-7"
+                rx="10.328"
+              />
+              <rect
+                width="17.657"
+                height="28"
+                x="1.5"
+                y="1.5"
+                class="empty-fix-5"
+                rx="8.828"
+              />
+            </g>
+          </g>
+          <path
+            d="M-3714-635a38.756 38.756 0 0 1-15.181-3.065 38.868 38.868 0 0 1-12.4-8.358 38.864 38.864 0 0 1-8.358-12.4A38.756 38.756 0 0 1-3753-674a38.756 38.756 0 0 1 3.065-15.18 38.864 38.864 0 0 1 8.358-12.4 38.87 38.87 0 0 1 12.4-8.358A38.756 38.756 0 0 1-3714-713a38.754 38.754 0 0 1 15.18 3.065 38.871 38.871 0 0 1 12.4 8.358 38.871 38.871 0 0 1 8.358 12.4A38.753 38.753 0 0 1-3675-674a38.753 38.753 0 0 1-3.065 15.18 38.871 38.871 0 0 1-8.358 12.4 38.874 38.874 0 0 1-12.4 8.358A38.754 38.754 0 0 1-3714-635zm0-67.5a28.533 28.533 0 0 0-28.5 28.5 28.533 28.533 0 0 0 28.5 28.5 28.532 28.532 0 0 0 28.5-28.5 28.532 28.532 0 0 0-28.5-28.5z"
+            transform="translate(3930 870)"
+            style="
+              stroke-linejoin: round;
+              stroke-linecap: round;
+              stroke: #bababa;
+              stroke-width: 3px;
+              fill: #fff;
+            "
+          />
+          <g transform="translate(85 49.688)">
+            <path
+              d="M0 0L9.5 4.156"
+              class="empty-fix-3"
+              transform="translate(116.5 139.5)"
+            />
+            <path
+              d="M0 4.156L9.5 0"
+              class="empty-fix-3"
+              transform="translate(116.5 143.656)"
+            />
+          </g>
+          <g transform="translate(222.5 189.188)">
+            <path d="M9.5 0L0 4.156" class="empty-fix-3" />
+            <path
+              d="M9.5 4.156L0 0"
+              class="empty-fix-3"
+              transform="translate(0 4.156)"
+            />
+          </g>
+          <g transform="rotate(-85 239.473 247.157)">
+            <path
+              d="M12.475 0c4.274 0 7.738 1.2 7.738 2.671s-3.465 2.671-7.738 2.671S0 3.4 0 1.924 8.2 0 12.475 0z"
+              class="empty-fix-4"
+              transform="rotate(-55 295.728 -175.43)"
+            />
+            <path
+              d="M12.475 0c4.274 0 7.738 1.2 7.738 2.671s-3.465 2.671-7.738 2.671S0 3.4 0 1.924 8.2 0 12.475 0z"
+              class="empty-fix-4"
+              transform="rotate(-17 704.633 -826.947)"
+            />
+            <path
+              d="M12.475 0c4.274 0 7.738 1.2 7.738 2.671s-3.465 2.671-7.738 2.671S0 3.4 0 1.924 8.2 0 12.475 0z"
+              class="empty-fix-4"
+              transform="rotate(-82 228.53 -68.834)"
+            />
+          </g>
+          <path
+            d="M0 0H140V120H0z"
+            class="empty-fix-5"
+            transform="translate(138 150)"
+          />
+          <circle
+            cx="27"
+            cy="27"
+            r="27"
+            class="empty-fix-4"
+            transform="translate(154 207)"
+          />
+          <text
+            transform="translate(163 243)"
+            style="
+              font-size: 24px;
+              font-family: ArialRoundedMTBold, Arial Rounded MT;
+              fill: #fff;
+            "
+          >
+            <tspan x="0" y="0">NO</tspan>
+          </text>
+        </g>
+      </svg>
+    </div>
+  </ng-template>
+</div>
diff --git a/src/app/ucap/call/components/history-expansion.component.scss b/src/app/ucap/call/components/history-expansion.component.scss
new file mode 100644
index 0000000..6b4f0e4
--- /dev/null
+++ b/src/app/ucap/call/components/history-expansion.component.scss
@@ -0,0 +1,42 @@
+.history-expansion-container {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  .empty {
+    widows: 100%;
+    height: 100%;
+    background-color: #f1f2f6;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    svg {
+      .empty-fix-1,
+      .empty-fix-3 {
+        stroke: #bababa;
+        stroke-width: 3px;
+      }
+
+      .empty-fix-1 {
+        fill: #fff;
+      }
+
+      .empty-fix-3 {
+        stroke-linecap: round;
+      }
+
+      .empty-fix-3,
+      .empty-fix-5 {
+        fill: none;
+      }
+
+      .empty-fix-4 {
+        fill: #bababa;
+      }
+
+      .empty-fix-7 {
+        stroke: none;
+      }
+    }
+  }
+}
diff --git a/src/app/ucap/call/components/history-expansion.component.spec.ts b/src/app/ucap/call/components/history-expansion.component.spec.ts
new file mode 100644
index 0000000..ca4d73b
--- /dev/null
+++ b/src/app/ucap/call/components/history-expansion.component.spec.ts
@@ -0,0 +1,32 @@
+import { TestBed, async } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { HistoryExpansionComponent } from './history-expansion.component';
+
+describe('app::ucap::chat::HistoryExpansionComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [RouterTestingModule],
+      declarations: [HistoryExpansionComponent]
+    }).compileComponents();
+  }));
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(HistoryExpansionComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'ucap-lg-web'`, () => {
+    const fixture = TestBed.createComponent(HistoryExpansionComponent);
+    const app = fixture.componentInstance;
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(HistoryExpansionComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement;
+    expect(compiled.querySelector('.content span').textContent).toContain(
+      'ucap-lg-web app is running!'
+    );
+  });
+});
diff --git a/src/app/ucap/call/components/history-expansion.component.ts b/src/app/ucap/call/components/history-expansion.component.ts
new file mode 100644
index 0000000..2dc063e
--- /dev/null
+++ b/src/app/ucap/call/components/history-expansion.component.ts
@@ -0,0 +1,122 @@
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+import {
+  Component,
+  OnInit,
+  OnDestroy,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Input,
+  Output,
+  EventEmitter
+} from '@angular/core';
+
+import { Store, select } from '@ngrx/store';
+
+import { CallHistory } from '@ucap/domain-call';
+
+import { DateService } from '@ucap/ng-ui/date';
+import { CallSelector } from '@ucap/ng-store-call';
+
+import { SearchData } from '@app/ucap/organization/models/search-data';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-call-history-expansion',
+  templateUrl: './history-expansion.component.html',
+  styleUrls: ['./history-expansion.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class HistoryExpansionComponent implements OnInit, OnDestroy {
+  @Input()
+  set itemList(obj: CallHistory[]) {
+    this._itemList = obj;
+    this._initHistoryGroup();
+  }
+  get itemList(): CallHistory[] {
+    return this._itemList;
+  }
+  _itemList: CallHistory[];
+
+  historyGroup: { division: string; historyList: CallHistory[] }[];
+  processing = false;
+
+  private ngOnDestroySubject: Subject<void> = new Subject();
+  constructor(
+    private router: Router,
+    private dateService: DateService,
+
+    private changeDetectorRef: ChangeDetectorRef
+  ) {}
+
+  ngOnInit(): void {}
+
+  ngOnDestroy(): void {
+    if (!!this.ngOnDestroySubject) {
+      this.ngOnDestroySubject.next();
+      this.ngOnDestroySubject.complete();
+    }
+  }
+
+  private _initHistoryGroup() {
+    this.historyGroup = [];
+
+    this.itemList.forEach((historyInfo) => {
+      const date = historyInfo.startDate;
+      let division = '';
+      try {
+        const value = this.dateService.get(date, 'YYYYMMDD');
+
+        if (value === 'Invalid date') {
+          division = date;
+        } else {
+          division = value;
+        }
+      } catch (error) {
+        division = date;
+      }
+
+      const index = this.historyGroup.findIndex(
+        (info) => info.division === division
+      );
+      if (index > -1) {
+        this.historyGroup[index] = {
+          ...this.historyGroup[index],
+          historyList: [...this.historyGroup[index].historyList, historyInfo]
+        };
+      } else {
+        this.historyGroup.push({
+          division,
+          historyList: [historyInfo]
+        });
+      }
+    });
+
+    this.changeDetectorRef.markForCheck();
+  }
+
+  onClickHistory(event: MouseEvent, historyInfo: CallHistory) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    let userSeq: string;
+    if (!!historyInfo.sendYn && historyInfo.sendYn === true) {
+      userSeq = historyInfo.calledUserSeq;
+    } else {
+      userSeq = historyInfo.callingUserSeq;
+    }
+
+    this.router.navigate(
+      [
+        'call',
+        {
+          outlets: { content: 'index' }
+        }
+      ],
+      {
+        queryParams: { id: userSeq }
+      }
+    );
+  }
+}
diff --git a/src/app/ucap/call/components/history-list-item-01.component.html b/src/app/ucap/call/components/history-list-item-01.component.html
new file mode 100644
index 0000000..e573dec
--- /dev/null
+++ b/src/app/ucap/call/components/history-list-item-01.component.html
@@ -0,0 +1,41 @@
+<div
+  class="history-list-container"
+  (mouseover)="onMouseover($event)"
+  (mouseleave)="onMouseleave($event)"
+>
+  <ucap-call-history-list-item
+    [historyInfo]="historyInfo"
+    class="ucap-call-history-list-item"
+  >
+    <div ucapCallHistoryListItem="profileImage" (click)="openProfile($event)">
+      <img
+        ucapImage
+        [base]="profileImageRoot"
+        [path]="getProfileImage()"
+        [default]="defaultProfileImage"
+      />
+    </div>
+
+    <div
+      class="action-content"
+      appHistoryListItemUserAction="action"
+      [ngClass]="!!isShowFAB && !!useFAB ? 'visible-profile-menu' : ''"
+    >
+      <ng-template
+        [ngTemplateOutlet]="profileMoreContextTemplate"
+      ></ng-template>
+    </div>
+  </ucap-call-history-list-item>
+</div>
+
+<ng-template #profileMoreContextTemplate>
+  <div class="ucap-call-history-menu-container">
+    <button
+      mat-icon-button
+      aria-label="call"
+      [matTooltip]="'common:tooltip.call' | ucapI18n"
+    >
+      <img src="assets/images/ico/btn_lise_chat_a24.svg" alt="" />
+    </button>
+  </div>
+</ng-template>
diff --git a/src/app/ucap/call/components/history-list-item-01.component.scss b/src/app/ucap/call/components/history-list-item-01.component.scss
new file mode 100644
index 0000000..4eab67b
--- /dev/null
+++ b/src/app/ucap/call/components/history-list-item-01.component.scss
@@ -0,0 +1,19 @@
+@import '~@ucap/ng-ui-material/material';
+
+/// var
+/// --ucap-organization-profile-list-item-01-size: 70px
+.profile-list-container {
+  width: 100%;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  padding: 0 16px;
+  align-items: center;
+  position: relative;
+  border-bottom: 1px solid #eee;
+  min-height: 60px;
+  cursor: pointer;
+}
+.ucap-organization-profile-list-user {
+  width: 100%;
+}
diff --git a/src/app/ucap/call/components/history-list-item-01.component.spec.ts b/src/app/ucap/call/components/history-list-item-01.component.spec.ts
new file mode 100644
index 0000000..09f048a
--- /dev/null
+++ b/src/app/ucap/call/components/history-list-item-01.component.spec.ts
@@ -0,0 +1,26 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { HistoryListItem01Component } from './history-list-item-01.component';
+
+describe('ucap::ucap::organization::HistoryListItem01Component', () => {
+  let component: HistoryListItem01Component;
+  let fixture: ComponentFixture<HistoryListItem01Component>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [HistoryListItem01Component]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HistoryListItem01Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/ucap/call/components/history-list-item-01.component.ts b/src/app/ucap/call/components/history-list-item-01.component.ts
new file mode 100644
index 0000000..b26d83f
--- /dev/null
+++ b/src/app/ucap/call/components/history-list-item-01.component.ts
@@ -0,0 +1,109 @@
+import { Subject } from 'rxjs';
+
+import {
+  Component,
+  OnInit,
+  OnDestroy,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Input
+} from '@angular/core';
+
+import { ucapAnimations } from '@ucap/ng-ui/core';
+import { CallHistory } from '@ucap/domain-call';
+import { AppChatService } from '@app/services/app-chat.service';
+import { MatDialog } from '@angular/material/dialog';
+import {
+  ProfileDialogComponent,
+  ProfileDialogData,
+  ProfileDialogResult
+} from '@app/sections/organization/dialogs/profile.dialog.component';
+
+@Component({
+  selector: 'app-call-history-list-item-01',
+  templateUrl: './history-list-item-01.component.html',
+  styleUrls: ['./history-list-item-01.component.scss'],
+  animations: ucapAnimations,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class HistoryListItem01Component implements OnInit, OnDestroy {
+  @Input()
+  historyInfo: CallHistory;
+
+  @Input()
+  useFAB = false;
+
+  isShowFAB = false;
+  menuButtonType = 2;
+  profileImageRoot: string;
+  defaultProfileImage: string;
+
+  private ngOnDestroySubject: Subject<void> = new Subject();
+  constructor(
+    private dialog: MatDialog,
+    private appChatService: AppChatService,
+    private changeDetectorRef: ChangeDetectorRef
+  ) {
+    this.defaultProfileImage = this.appChatService.defaultProfileImage;
+    this.profileImageRoot = '';
+  }
+
+  ngOnInit(): void {}
+
+  ngOnDestroy(): void {
+    if (!!this.ngOnDestroySubject) {
+      this.ngOnDestroySubject.next();
+      this.ngOnDestroySubject.complete();
+    }
+  }
+
+  onMouseover(event: MouseEvent): void {
+    if (!!this.useFAB) {
+      this.isShowFAB = true;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+  }
+  onMouseleave(event: MouseEvent): void {
+    if (!!this.useFAB) {
+      this.isShowFAB = false;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+  }
+
+  getProfileImage(): string {
+    if (!!this.historyInfo.sendYn && this.historyInfo.sendYn === true) {
+      return this.historyInfo.calledImage;
+    } else {
+      return this.historyInfo.callingImage;
+    }
+  }
+
+  openProfile(event: MouseEvent): void {
+    event.preventDefault();
+    event.stopPropagation();
+
+    let userSeq: string;
+
+    if (!!this.historyInfo.sendYn && this.historyInfo.sendYn === true) {
+      userSeq = this.historyInfo.calledUserSeq;
+    } else {
+      userSeq = this.historyInfo.callingUserSeq;
+    }
+
+    if (!!userSeq) {
+      this.dialog.open<
+        ProfileDialogComponent,
+        ProfileDialogData,
+        ProfileDialogResult
+      >(ProfileDialogComponent, {
+        panelClass: 'mid-create-dialog',
+        data: {
+          userSeq
+        }
+      });
+    }
+  }
+}
diff --git a/src/app/ucap/call/components/index.ts b/src/app/ucap/call/components/index.ts
new file mode 100644
index 0000000..2ae466e
--- /dev/null
+++ b/src/app/ucap/call/components/index.ts
@@ -0,0 +1,9 @@
+import { HistoryExpansionComponent } from './history-expansion.component';
+import { TimeLineComponent } from './time-line.component';
+import { HistoryListItem01Component } from './history-list-item-01.component';
+
+export const COMPONENTS = [
+  HistoryListItem01Component,
+  HistoryExpansionComponent,
+  TimeLineComponent
+];
diff --git a/src/app/ucap/call/components/time-line.component.html b/src/app/ucap/call/components/time-line.component.html
new file mode 100644
index 0000000..c08a25e
--- /dev/null
+++ b/src/app/ucap/call/components/time-line.component.html
@@ -0,0 +1,14 @@
+<div fxFlexFill class="app-call-time-line-container">
+  <ucap-call-timeline-item-list-01
+    [itemInfos]="historyList"
+    [maxBufferPx]="200"
+    [minBufferPx]="200"
+  >
+    <ng-template ucapCallTimelineItemList01Node let-itemInfo>
+      <ucap-call-timeline-item
+        [historyInfo]="itemInfo"
+        [dateChanged]="getDateSplitter(itemInfo)"
+      ></ucap-call-timeline-item>
+    </ng-template>
+  </ucap-call-timeline-item-list-01>
+</div>
diff --git a/src/app/ucap/call/components/time-line.component.scss b/src/app/ucap/call/components/time-line.component.scss
new file mode 100644
index 0000000..eec3a37
--- /dev/null
+++ b/src/app/ucap/call/components/time-line.component.scss
@@ -0,0 +1 @@
+@import '~@ucap/lg-scss/mixins';
diff --git a/src/app/ucap/call/components/time-line.component.spec.ts b/src/app/ucap/call/components/time-line.component.spec.ts
new file mode 100644
index 0000000..9f56f96
--- /dev/null
+++ b/src/app/ucap/call/components/time-line.component.spec.ts
@@ -0,0 +1,32 @@
+import { TestBed, async } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { TimeLineComponent } from './time-line.component';
+
+describe('app::ucap::organization::TimeLineComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [RouterTestingModule],
+      declarations: [TimeLineComponent]
+    }).compileComponents();
+  }));
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(TimeLineComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'ucap-lg-web'`, () => {
+    const fixture = TestBed.createComponent(TimeLineComponent);
+    const app = fixture.componentInstance;
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(TimeLineComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement;
+    expect(compiled.querySelector('.content span').textContent).toContain(
+      'ucap-lg-web app is running!'
+    );
+  });
+});
diff --git a/src/app/ucap/call/components/time-line.component.ts b/src/app/ucap/call/components/time-line.component.ts
new file mode 100644
index 0000000..10324e0
--- /dev/null
+++ b/src/app/ucap/call/components/time-line.component.ts
@@ -0,0 +1,56 @@
+import { Subject } from 'rxjs';
+import moment from 'moment';
+
+import {
+  Component,
+  OnInit,
+  OnDestroy,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Input
+} from '@angular/core';
+import { CallHistory } from '@ucap/domain-call';
+
+@Component({
+  selector: 'app-call-time-line',
+  templateUrl: './time-line.component.html',
+  styleUrls: ['./time-line.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class TimeLineComponent implements OnInit, OnDestroy {
+  @Input()
+  historyList: CallHistory[];
+
+  private ngOnDestroySubject: Subject<void> = new Subject();
+  constructor(private changeDetectorRef: ChangeDetectorRef) {}
+
+  ngOnInit(): void {}
+
+  ngOnDestroy(): void {
+    if (!!this.ngOnDestroySubject) {
+      this.ngOnDestroySubject.next();
+      this.ngOnDestroySubject.complete();
+    }
+  }
+
+  /** Date Splitter show check */
+  getDateSplitter(historyInfo: CallHistory): boolean {
+    const curIndex = this.historyList.findIndex(
+      (v) => v.callLogSeq === historyInfo.callLogSeq
+    );
+
+    if (curIndex === 0) {
+      return true;
+    } else if (curIndex > 0) {
+      if (!this.historyList[curIndex]) {
+        return false;
+      }
+      return !moment(this.historyList[curIndex].startDate).isSame(
+        moment(this.historyList[curIndex - 1].startDate),
+        'day'
+      );
+    }
+
+    return false;
+  }
+}
diff --git a/src/app/ucap/chat/chat.module.ts b/src/app/ucap/chat/chat.module.ts
index f3fb4be..112bcd5 100644
--- a/src/app/ucap/chat/chat.module.ts
+++ b/src/app/ucap/chat/chat.module.ts
@@ -8,7 +8,10 @@ import { MatRippleModule } from '@angular/material/core';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 
 import { I18nModule, UCAP_I18N_NAMESPACE } from '@ucap/ng-i18n';
-import { UiModule } from '@ucap/ng-ui';
+
+import { UiCoreModule } from '@ucap/ng-ui/core';
+import { UiDateModule } from '@ucap/ng-ui/date';
+
 import { GroupUiModule } from '@ucap/ng-ui-group';
 import { OrganizationUiModule } from '@ucap/ng-ui-organization';
 import { ChatUiModule } from '@ucap/ng-ui-chat';
@@ -50,7 +53,10 @@ import { AppGroupModule } from '../group/group.module';
     MatInputModule,
 
     I18nModule,
-    UiModule,
+
+    UiCoreModule,
+    UiDateModule,
+
     OrganizationUiModule,
     GroupUiModule,
     ChatUiModule,
diff --git a/src/app/ucap/chat/components/attach-downcheck.component.html b/src/app/ucap/chat/components/attach-downcheck.component.html
index 6810c31..d57ef92 100644
--- a/src/app/ucap/chat/components/attach-downcheck.component.html
+++ b/src/app/ucap/chat/components/attach-downcheck.component.html
@@ -46,7 +46,7 @@
             <div class="profile-image">
               <app-group-profile-image-01
                 [userInfo]="itemInfo"
-                [versionInfo]="versionInfo2Res"
+                [versionInfo]="versionInfo"
               ></app-group-profile-image-01>
             </div>
             <div class="user-info">
diff --git a/src/app/ucap/chat/components/attach-downcheck.component.ts b/src/app/ucap/chat/components/attach-downcheck.component.ts
index 82cb8cf..27c801a 100644
--- a/src/app/ucap/chat/components/attach-downcheck.component.ts
+++ b/src/app/ucap/chat/components/attach-downcheck.component.ts
@@ -14,17 +14,17 @@ import {
 
 import { Store, select } from '@ngrx/store';
 
-import { VersionInfo2Response } from '@ucap/api-public';
+import { User } from '@ucap/domain-organization';
 import {
   UserInfo as RoomUserInfo,
-  UserInfoShort as RoomUserInfoShort
-} from '@ucap/protocol-room';
-import { User } from '@ucap/protocol-info';
-import { FileDownloadInfo } from '@ucap/protocol-file';
+  UserInfoShort as RoomUserInfoShort,
+  FileDownloadInfo
+} from '@ucap/domain-chat';
 
 import { RoomSelector, ChattingSelector } from '@ucap/ng-store-chat';
 import { UserSelector } from '@ucap/ng-store-organization';
 import { ConfigurationSelector } from '@ucap/ng-store-authentication';
+import { VersionInfo } from '@ucap/domain-authentication';
 
 export type UserInfoTypes = RoomUserInfo | RoomUserInfoShort;
 export type FilterType = 'ALL' | 'DOWN' | 'NOTDOWN';
@@ -40,12 +40,12 @@ export class AttachDowncheckComponent implements OnInit, OnDestroy {
   private ngOnDestroySubject = new Subject<boolean>();
 
   @Input()
-  set roomId(value: string) {
-    this._roomId = value;
-    if (!!this.roomIdSubject) {
-      this.roomIdSubject.next(value);
+  set roomId(roomId: string) {
+    if (this._roomId !== roomId) {
+      this._roomId = roomId;
+      this.roomIdSubject.next(roomId);
+      this._initializeData();
     }
-    this._initializeData();
   }
   get roomId(): string {
     return this._roomId;
@@ -73,7 +73,7 @@ export class AttachDowncheckComponent implements OnInit, OnDestroy {
   fileInfoCheckList: FileDownloadInfo[];
 
   user: User;
-  versionInfo2Res: VersionInfo2Response;
+  versionInfo: VersionInfo;
 
   constructor(
     private store: Store<any>,
@@ -84,10 +84,10 @@ export class AttachDowncheckComponent implements OnInit, OnDestroy {
     this.store
       .pipe(
         takeUntil(this.ngOnDestroySubject),
-        select(ConfigurationSelector.versionInfo2Response)
+        select(ConfigurationSelector.versionInfo)
       )
-      .subscribe((versionInfo2Res) => {
-        this.versionInfo2Res = versionInfo2Res;
+      .subscribe((versionInfo) => {
+        this.versionInfo = versionInfo;
       });
 
     this._initializeData();
diff --git a/src/app/ucap/chat/components/attach-file-list.component.html b/src/app/ucap/chat/components/attach-file-list.component.html
index 707d598..e6ee959 100644
--- a/src/app/ucap/chat/components/attach-file-list.component.html
+++ b/src/app/ucap/chat/components/attach-file-list.component.html
@@ -1,5 +1,5 @@
 <div class="attach-file-list-container" fxFlexFill>
-  <ucap-chat-file-list [fileInfos]="fileInfoList">
+  <ucap-chat-file-list #ucapChatList [fileInfos]="fileInfoList">
     <ng-template ucapChatFileListNode let-fileObj>
       <ucap-chat-file-list-item-01
         [fileInfo]="fileObj.fileInfo"
diff --git a/src/app/ucap/chat/components/attach-file-list.component.ts b/src/app/ucap/chat/components/attach-file-list.component.ts
index 3623783..7733e8f 100644
--- a/src/app/ucap/chat/components/attach-file-list.component.ts
+++ b/src/app/ucap/chat/components/attach-file-list.component.ts
@@ -9,27 +9,35 @@ import {
   ChangeDetectorRef,
   Input,
   Output,
-  EventEmitter
+  EventEmitter,
+  ViewChild
 } from '@angular/core';
 
+import { Store, select } from '@ngrx/store';
+
+import { FileDownloadItem } from '@ucap/domain-common';
 import {
   UserInfo as RoomUserInfo,
-  UserInfoShort as RoomUserInfoShort
-} from '@ucap/protocol-room';
+  UserInfoShort as RoomUserInfoShort,
+  FileInfo,
+  FileDownloadInfo,
+  FileType
+} from '@ucap/domain-chat';
+
+import { InfoRequest } from '@ucap/protocol-file';
+
+import { LogService } from '@ucap/ng-logger';
 import {
   RoomUserMap,
   RoomUserShortMap
 } from '@ucap/ng-store-chat/lib/store/room/state';
-import { FileInfo, InfoRequest, FileDownloadInfo } from '@ucap/protocol-file';
-import { LogService } from '@ucap/ng-logger';
-import { Store, select } from '@ngrx/store';
 import {
   RoomSelector,
   ChattingActions,
   ChattingSelector
 } from '@ucap/ng-store-chat';
-import { FileDownloadItem } from '@ucap/api';
-import { FileType } from '@ucap/protocol-event';
+
+import { FileListComponent } from '@ucap/ng-ui-chat';
 
 @Component({
   selector: 'app-chat-attach-file-list',
@@ -63,6 +71,9 @@ export class AttachFileListComponent implements OnInit, OnDestroy {
   @Output()
   showDownCheck = new EventEmitter<FileInfo>();
 
+  @ViewChild('ucapChatList', { static: false })
+  ucapChatList: FileListComponent;
+
   roomUserMap: RoomUserMap;
   roomUserShortMap: RoomUserShortMap;
   downloadTotalCount: number;
@@ -188,4 +199,10 @@ export class AttachFileListComponent implements OnInit, OnDestroy {
       );
     }
   }
+
+  updatePsDirectiveRef(): void {
+    if (!!this.ucapChatList && !!this.ucapChatList.psDirectiveRef) {
+      this.ucapChatList.psDirectiveRef.update();
+    }
+  }
 }
diff --git a/src/app/ucap/chat/components/attach-image-list.component.html b/src/app/ucap/chat/components/attach-image-list.component.html
index 2ea0de2..5b6c7eb 100644
--- a/src/app/ucap/chat/components/attach-image-list.component.html
+++ b/src/app/ucap/chat/components/attach-image-list.component.html
@@ -1,5 +1,5 @@
 <div class="attach-image-list-container" fxFlexFill>
-  <ucap-chat-image-list [fileInfos]="fileInfoList">
+  <ucap-chat-image-list #ucapChatList [fileInfos]="fileInfoList">
     <ng-template ucapChatImageListNode let-fileObj>
       <ucap-chat-image-list-item-01
         [fileInfo]="fileObj.fileInfo"
diff --git a/src/app/ucap/chat/components/attach-image-list.component.ts b/src/app/ucap/chat/components/attach-image-list.component.ts
index 65d0b9b..3acd788 100644
--- a/src/app/ucap/chat/components/attach-image-list.component.ts
+++ b/src/app/ucap/chat/components/attach-image-list.component.ts
@@ -9,13 +9,15 @@ import {
   ChangeDetectorRef,
   Input,
   Output,
-  EventEmitter
+  EventEmitter,
+  ViewChild
 } from '@angular/core';
 
-import { FileInfo } from '@ucap/protocol-file';
+import { FileDownloadItem } from '@ucap/domain-common';
+import { FileInfo, FileEventJson } from '@ucap/domain-chat';
+
 import { LogService } from '@ucap/ng-logger';
-import { FileDownloadItem } from '@ucap/api';
-import { FileEventJson } from '@ucap/protocol-event';
+import { ImageListComponent } from '@ucap/ng-ui-chat';
 
 @Component({
   selector: 'app-chat-attach-image-list',
@@ -56,6 +58,9 @@ export class AttachImageListComponent implements OnInit, OnDestroy {
   @Output()
   delete = new EventEmitter<FileInfo>();
 
+  @ViewChild('ucapChatList', { static: false })
+  ucapChatList: ImageListComponent;
+
   private ngOnDestroySubject: Subject<void> = new Subject();
 
   constructor(
@@ -114,4 +119,10 @@ export class AttachImageListComponent implements OnInit, OnDestroy {
   onClickDelete(fileInfo: FileInfo) {
     this.delete.emit(fileInfo);
   }
+
+  updatePsDirectiveRef(): void {
+    if (!!this.ucapChatList && !!this.ucapChatList.psDirectiveRef) {
+      this.ucapChatList.psDirectiveRef.update();
+    }
+  }
 }
diff --git a/src/app/ucap/chat/components/email-send.selector.component.ts b/src/app/ucap/chat/components/email-send.selector.component.ts
index df812a3..4d8a4fa 100644
--- a/src/app/ucap/chat/components/email-send.selector.component.ts
+++ b/src/app/ucap/chat/components/email-send.selector.component.ts
@@ -1,7 +1,6 @@
 import {
   Component,
   OnInit,
-  AfterViewInit,
   Output,
   EventEmitter,
   OnDestroy
@@ -14,8 +13,7 @@ import { SendEventMailType } from '@ucap/pi';
   templateUrl: './email-send.selector.component.html',
   styleUrls: ['./email-send.selector.component.scss']
 })
-export class EmailSendSelectorComponent
-  implements OnInit, OnDestroy, AfterViewInit {
+export class EmailSendSelectorComponent implements OnInit, OnDestroy {
   @Output()
   sendEventEmail = new EventEmitter<SendEventMailType>();
 
@@ -30,8 +28,6 @@ export class EmailSendSelectorComponent
 
   ngOnDestroy(): void {}
 
-  ngAfterViewInit(): void {}
-
   onClickClose(): void {
     this.closed.emit();
   }
diff --git a/src/app/ucap/chat/components/file-upload.selector.component.scss b/src/app/ucap/chat/components/file-upload.selector.component.scss
index f6791b1..5d9a475 100644
--- a/src/app/ucap/chat/components/file-upload.selector.component.scss
+++ b/src/app/ucap/chat/components/file-upload.selector.component.scss
@@ -56,7 +56,7 @@
       align-items: center;
       justify-content: space-between;
       height: 100%;
-      &:after {
+      /*&:after {
         content: '';
         width: 12px;
         height: 12px;
@@ -67,7 +67,7 @@
         background-color: $white;
         display: inline-block;
         border-radius: 50%;
-      }
+      }*/
       .mat-icon {
         font-size: 1.429em;
         position: relative;
diff --git a/src/app/ucap/chat/components/file-upload.selector.component.ts b/src/app/ucap/chat/components/file-upload.selector.component.ts
index 7a5e590..db162e8 100644
--- a/src/app/ucap/chat/components/file-upload.selector.component.ts
+++ b/src/app/ucap/chat/components/file-upload.selector.component.ts
@@ -2,13 +2,13 @@ import {
   Component,
   OnInit,
   ElementRef,
-  AfterViewInit,
   ChangeDetectorRef,
   ChangeDetectionStrategy,
   Output,
   EventEmitter
 } from '@angular/core';
-import { FileUploadItem } from '@ucap/api';
+
+import { FileUploadItem } from '@ucap/domain-common';
 
 @Component({
   selector: 'app-chat-selector-file-upload',
@@ -16,7 +16,7 @@ import { FileUploadItem } from '@ucap/api';
   styleUrls: ['./file-upload.selector.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class FileUploadSelectorComponent implements OnInit, AfterViewInit {
+export class FileUploadSelectorComponent implements OnInit {
   @Output()
   closed = new EventEmitter<void>();
 
@@ -30,8 +30,6 @@ export class FileUploadSelectorComponent implements OnInit, AfterViewInit {
 
   ngOnInit() {}
 
-  ngAfterViewInit(): void {}
-
   onClickClose(): void {
     this.closed.emit();
   }
diff --git a/src/app/ucap/chat/components/message-box.component.html b/src/app/ucap/chat/components/message-box.component.html
index bf2f2df..6c6f942 100644
--- a/src/app/ucap/chat/components/message-box.component.html
+++ b/src/app/ucap/chat/components/message-box.component.html
@@ -64,8 +64,7 @@
       <div
         class="ballon-container"
         [ngClass]="
-          message.type === EventType.File &&
-          roomInfo?.expiredFileStdSeq > message?.seq
+          message.type === EventType.File && expiredFileStdSeq > message?.seq
             ? 'disable-bubble'
             : ''
         "
@@ -96,7 +95,7 @@
             {{ message.sendDate | ucapDate: 'LT' }}
           </div>
           <div class="more-area-box">
-            <div class="btn-area">
+            <div *ngIf="isMoreable(message)" class="btn-area">
               <!--Button Set-->
               <div class="btn-bubble-btn-set">
                 <button
@@ -127,9 +126,7 @@
                   mat-icon-button
                   aria-label="chat relay"
                   [matTooltip]="'label.forwardEventTo' | ucapI18n"
-                  [disabled]="
-                    !isForwardableMessage(message, roomInfo?.expiredFileStdSeq)
-                  "
+                  [disabled]="!isForwardableMessage(message)"
                   (click)="onClickMessageContextMenu('FORWARD')"
                 >
                   <img
@@ -142,9 +139,7 @@
                   mat-icon-button
                   aria-label="chat me"
                   [matTooltip]="'label.forwardEventToMe' | ucapI18n"
-                  [disabled]="
-                    !isForwardableMessage(message, roomInfo?.expiredFileStdSeq)
-                  "
+                  [disabled]="!isForwardableMessage(message)"
                   (click)="onClickMessageContextMenu('FORWARD_TO_ME')"
                 >
                   <img
@@ -169,7 +164,7 @@
                   mat-icon-button
                   aria-label="chat undo"
                   [matTooltip]="'label.recallEvent' | ucapI18n"
-                  [disabled]="!isRecallableMessage(message, user?.info?.seq)"
+                  [disabled]="!isRecallableMessage(message)"
                   (click)="onClickMessageContextMenu('RECALL')"
                 >
                   <img
@@ -210,8 +205,8 @@
               [message]="message"
               [deviceType]="loginSession.deviceType"
               [roomInfo]="roomInfo"
-              [fileRetentionPeriod]="loginRes?.fileRetentionPeriod"
-              (save)="fileSave($event)"
+              [fileRetentionPeriod]="loginInfo?.fileRetentionPeriod"
+              (save)="onClickFileSave($event)"
               (fileViewer)="openViewer($event)"
             >
             </ucap-chat-message-box-file>
@@ -245,6 +240,9 @@
             <ucap-chat-message-box-video-conference
               *ngSwitchCase="EventType.VideoConference"
               [message]="message"
+              [canVideoConference]="true"
+              (conferenceDetail)="onOpenVcDetail($event)"
+              (conferenceJoin)="onJoinConference($event)"
             >
             </ucap-chat-message-box-video-conference>
 
@@ -281,7 +279,7 @@
         </div>
       </div>
       <div
-        *ngIf="isShowUnreadCount() && unreadCount"
+        *ngIf="!!isShowUnreadCount && unreadCount"
         class="unread-count text-accent-chat"
       >
         {{ unreadCount }}
diff --git a/src/app/ucap/chat/components/message-box.component.ts b/src/app/ucap/chat/components/message-box.component.ts
index 785e741..614e5cc 100644
--- a/src/app/ucap/chat/components/message-box.component.ts
+++ b/src/app/ucap/chat/components/message-box.component.ts
@@ -1,5 +1,4 @@
 import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
 
 import {
   Component,
@@ -7,70 +6,91 @@ import {
   Input,
   EventEmitter,
   Output,
-  AfterViewInit,
   ChangeDetectorRef,
   OnDestroy,
-  Inject
+  Inject,
+  ChangeDetectionStrategy
 } from '@angular/core';
 
-import { Store, select } from '@ngrx/store';
-
 import { MatDialog } from '@angular/material/dialog';
 
-import { LoginSession, DeviceType } from '@ucap/core';
-import { NativeService } from '@ucap/native';
-import { FileDownloadItem } from '@ucap/api';
-import { LoginResponse } from '@ucap/protocol-authentication';
+import { FileDownloadItem } from '@ucap/domain-common';
+import { User } from '@ucap/domain-organization';
+import { LoginSession, LoginInfo } from '@ucap/domain-authentication';
 import {
   Info,
   EventJson,
   EventType,
-  FileType,
   StickerEventJson,
   isRecalled,
   isCopyable,
   isRecallable,
   isForwardable,
   FileEventJson,
-  MassTranslationEventJson
-} from '@ucap/protocol-event';
-import {
+  MassTranslationEventJson,
+  VideoConferenceEventJson,
   UserInfo as RoomUserInfo,
   UserInfoShort as RoomUserInfoShort,
   RoomInfo,
   RoomType
-} from '@ucap/protocol-room';
-import { User } from '@ucap/protocol-info';
+} from '@ucap/domain-chat';
+
+import { NativeService } from '@ucap/native';
 
-import { I18nService } from '@ucap/ng-i18n';
-import { LocalStorageService } from '@ucap/ng-web-storage';
-import { LogService } from '@ucap/ng-logger';
 import { UCAP_NATIVE_SERVICE } from '@ucap/ng-native';
 
-import { UserSelector } from '@ucap/ng-store-organization';
-import { LoginSelector } from '@ucap/ng-store-authentication';
-
-import { SelectFileInfo } from '@ucap/ng-ui';
-
-import { AppAuthenticationService } from '@app/services/app-authentication.service';
+import { SelectFileInfo } from '@ucap/ng-ui/viewer';
 
 import {
   TextDetailDialogComponent,
   TextDetailDialogData,
   TextDetailDialogResult
 } from '@app/sections/chat/dialogs/text-detail.dialog.component';
-import { AppFileService } from '@app/services/app-file.service';
+import { UserPermission } from '@ucap/domain-authorization';
 
 @Component({
   selector: 'app-chat-message-box',
   templateUrl: './message-box.component.html',
-  styleUrls: ['./message-box.component.scss']
+  styleUrls: ['./message-box.component.scss'],
+
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class MessageBoxComponent implements OnInit, OnDestroy, AfterViewInit {
+export class MessageBoxComponent implements OnInit, OnDestroy {
+  private ngOnDestroySubject: Subject<void> = new Subject();
+
   @Input()
   message: Info<EventJson>;
   @Input()
-  roomInfo: RoomInfo;
+  set roomInfo(value: RoomInfo) {
+    this._roomInfo = value;
+
+    this.expiredFileStdSeq =
+      !!value && !!value.expiredFileStdSeq
+        ? value.expiredFileStdSeq
+        : undefined;
+
+    this.isShowUnreadCount =
+      !!this.roomInfo &&
+      [RoomType.Mytalk, RoomType.Allim, RoomType.Bot, RoomType.Link].some(
+        (v) => v === this.roomInfo.roomType
+      )
+        ? false
+        : true;
+  }
+  get roomInfo(): RoomInfo {
+    return this._roomInfo;
+  }
+  // tslint:disable-next-line: variable-name
+  _roomInfo: RoomInfo;
+
+  @Input()
+  loginSession: LoginSession;
+  @Input()
+  loginInfo: LoginInfo;
+  @Input()
+  user: User;
+  @Input()
+  userPermission: UserPermission;
 
   @Input()
   isMe = false;
@@ -88,29 +108,24 @@ export class MessageBoxComponent implements OnInit, OnDestroy, AfterViewInit {
   @Input()
   unreadCount: number;
 
-  loginSession: LoginSession;
-  loginRes: LoginResponse;
-  user: User;
-
-  EventType = EventType;
-
-  isRecalledMessage = isRecalled;
-  isCopyableMessage = isCopyable;
-  isRecallableMessage = isRecallable;
-  isForwardableMessage = isForwardable;
-
-  //////////////////////////////////
-  @Input()
-  messageType: string;
   @Input()
   highlight = false;
   @Input()
   existReadToHere = false;
-  @Input()
-  fileType: FileType;
 
   @Output()
-  fileViewer: EventEmitter<FileEventJson> = new EventEmitter();
+  fileViewer: EventEmitter<{
+    selectFileInfo: SelectFileInfo;
+    senderInfo: RoomUserInfoShort | RoomUserInfo;
+  }> = new EventEmitter();
+
+  @Output()
+  fileSave: EventEmitter<{
+    fileInfo: FileEventJson;
+    fileDownloadItem: FileDownloadItem;
+    type: string;
+    senderInfo: RoomUserInfoShort | RoomUserInfo;
+  }> = new EventEmitter();
 
   @Output()
   messageContextMenu = new EventEmitter<{
@@ -127,35 +142,51 @@ export class MessageBoxComponent implements OnInit, OnDestroy, AfterViewInit {
   @Output()
   openProfile = new EventEmitter<string>();
 
-  private ngOnDestroySubject: Subject<void> = new Subject();
+  @Output()
+  joinConference = new EventEmitter<number>();
+
+  expiredFileStdSeq: number;
+  isShowUnreadCount = false;
+
+  EventType = EventType;
+
+  isRecalledMessage = isRecalled;
+  isCopyableMessage = isCopyable;
+  isRecallableMessage = (event: Info<any>) => {
+    return !!this.user && !!this.user.info && this.user.info.seq
+      ? isRecallable(event, String(this.user.info.seq))
+      : false;
+  };
+  isForwardableMessage = (event: Info) => {
+    let enable: boolean = isForwardable(event, this.expiredFileStdSeq);
+    if (
+      !!enable &&
+      event.type === EventType.File &&
+      !!this.userPermission &&
+      !!this.userPermission.fileTransferAllowedCompanyList &&
+      this.userPermission.fileTransferAllowedCompanyList.length > 0
+    ) {
+      enable =
+        this.userPermission.fileTransferAllowedCompanyList.indexOf(
+          (event.sentMessageJson as FileEventJson).companyCode
+        ) > -1;
+    }
+    return enable;
+  };
+  isMoreable = (event: Info) => {
+    if (event.type === EventType.VideoConference) {
+      return false;
+    }
+    return true;
+  };
 
   constructor(
-    private store: Store<any>,
-    private i18nService: I18nService,
     private dialog: MatDialog,
-    private localStorageService: LocalStorageService,
-    private logService: LogService,
-    private appAuthenticationService: AppAuthenticationService,
-    private appFileService: AppFileService,
     @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
     private changeDetectorRef: ChangeDetectorRef
   ) {}
 
-  ngOnInit() {
-    this.store
-      .pipe(takeUntil(this.ngOnDestroySubject), select(UserSelector.user))
-      .subscribe((user) => {
-        this.user = user;
-      });
-
-    this.store
-      .pipe(takeUntil(this.ngOnDestroySubject), select(LoginSelector.loginRes))
-      .subscribe((loginRes) => {
-        this.loginRes = loginRes;
-      });
-
-    this.loginSession = this.appAuthenticationService.getLoginSession();
-  }
+  ngOnInit() {}
 
   ngOnDestroy(): void {
     if (!!this.ngOnDestroySubject) {
@@ -164,8 +195,6 @@ export class MessageBoxComponent implements OnInit, OnDestroy, AfterViewInit {
     }
   }
 
-  ngAfterViewInit(): void {}
-
   /**
    * 정보성 Event 인지 판단.
    * @description 정보성 event 일 경우 프로필, 일시 를 표현하지 않는다.
@@ -210,6 +239,18 @@ export class MessageBoxComponent implements OnInit, OnDestroy, AfterViewInit {
     this.nativeService.platform_openDefaultBrowser(url);
   }
 
+  onOpenVcDetail(message: VideoConferenceEventJson): void {
+    // if (!!message && !!message.conferenceSeq) {
+    //   this.joinConference.emit(message.conferenceSeq);
+    // }
+    console.log(message);
+  }
+  onJoinConference(message: VideoConferenceEventJson): void {
+    if (!!message && !!message.conferenceSeq) {
+      this.joinConference.emit(message.conferenceSeq);
+    }
+  }
+
   /**
    * Detail view > Mass text.
    */
@@ -225,7 +266,7 @@ export class MessageBoxComponent implements OnInit, OnDestroy, AfterViewInit {
         roomId: this.roomInfo.roomId,
         userSeq: String(this.user.info.seq),
         deviceType: this.loginSession.deviceType,
-        token: this.loginRes.tokenString,
+        token: this.loginInfo.tokenString,
         eventMassSeq: Number(eventMassSeq)
       }
     });
@@ -240,17 +281,6 @@ export class MessageBoxComponent implements OnInit, OnDestroy, AfterViewInit {
   }) {
     this.massTranslationDetail.emit(params);
   }
-  isShowUnreadCount = () => {
-    if (
-      !!this.roomInfo &&
-      [RoomType.Mytalk, RoomType.Allim, RoomType.Bot, RoomType.Link].some(
-        (v) => v === this.roomInfo.roomType
-      )
-    ) {
-      return false;
-    }
-    return true;
-  };
 
   onClickMessageContextMenu(menuType: string) {
     this.messageContextMenu.emit({
@@ -260,64 +290,15 @@ export class MessageBoxComponent implements OnInit, OnDestroy, AfterViewInit {
   }
 
   /** [Event] Image Viewer */
-  openViewer(fileEvent: SelectFileInfo): void {
-    this.fileViewer.emit(fileEvent);
+  openViewer(selectFileInfo: SelectFileInfo): void {
+    this.fileViewer.emit({ selectFileInfo, senderInfo: this.senderInfo });
   }
 
-  fileSave(params: {
+  onClickFileSave(params: {
     fileInfo: FileEventJson;
     fileDownloadItem: FileDownloadItem;
     type: string;
   }): void {
-    if (
-      params.type === 'saveAs' &&
-      this.loginSession.deviceType === DeviceType.PC
-    ) {
-      this.nativeService
-        .file_selectForSave({ defaultPath: params.fileInfo.fileName })
-        .then((result) => {
-          if (!!result) {
-            if (!!result.canceled) {
-              // 취소함.
-            } else {
-              this.appFileService.saveFile(
-                {
-                  fileInfo: params.fileInfo,
-                  fileDownloadItem: params.fileDownloadItem,
-                  type: params.type,
-                  fileName: params.fileInfo.fileName,
-                  fileDownloadUrl: undefined,
-                  savePath: result.filePath
-                },
-                this.loginRes,
-                this.user,
-                this.loginSession
-              );
-            }
-          }
-        })
-        .catch((reason) => {
-          // this.snackBarService.open(
-          //   this.translateService.instant(
-          //     'common:file.errors.failToSpecifyPath'
-          //   ),
-          //   this.translateService.instant('common:file.errors.label')
-          // );
-        });
-    } else {
-      this.appFileService.saveFile(
-        {
-          fileInfo: params.fileInfo,
-          fileDownloadItem: params.fileDownloadItem,
-          type: params.type,
-          fileName: params.fileInfo.fileName,
-          fileDownloadUrl: undefined,
-          savePath: undefined
-        },
-        this.loginRes,
-        this.user,
-        this.loginSession
-      );
-    }
+    this.fileSave.emit({ ...params, senderInfo: this.senderInfo });
   }
 }
diff --git a/src/app/ucap/chat/components/recent-message.component.html b/src/app/ucap/chat/components/recent-message.component.html
index a958e69..5a54257 100644
--- a/src/app/ucap/chat/components/recent-message.component.html
+++ b/src/app/ucap/chat/components/recent-message.component.html
@@ -16,16 +16,7 @@
         {{ senderInfo | ucapOrganizationTranslate: 'grade':undefined:' ' }}
       </div>
     </div>
-    <div class="contents">
-      두줄만 ellipsis 해주세요.안녕하세요! 주간보고서를 금일까지 전달해 주시기
-      바랍니다.안녕하세요! 주간보고서를 금일까지 전달해 주시기
-      바랍니다.안녕하세요! 주간보고서를 금일까지 전달해 주시기
-      바랍니다.안녕하세요! 주간보고서를 금일까지 전달해 주시기
-      바랍니다.안녕하세요! 주간보고서를 금일까지 전달해 주시기
-      바랍니다.안녕하세요! 주간보고서를 금일까지 전달해 주시기
-      바랍니다.안녕하세요! 주간보고서를 금일까지 전달해 주시기
-      바랍니다.안녕하세요! 주간보고서를 금일까지 전달해 주시기 바랍니다.
-    </div>
+    <div class="contents" [innerHTML]="getMessage(message)"></div>
     <div class="btn-area">
       <button
         mat-stroked-button
diff --git a/src/app/ucap/chat/components/recent-message.component.ts b/src/app/ucap/chat/components/recent-message.component.ts
index 0f229f1..2a50ae5 100644
--- a/src/app/ucap/chat/components/recent-message.component.ts
+++ b/src/app/ucap/chat/components/recent-message.component.ts
@@ -6,19 +6,28 @@ import {
   EventEmitter,
   Input
 } from '@angular/core';
+
 import {
   UserInfo as RoomUserInfo,
-  UserInfoShort as RoomUserInfoShort
-} from '@ucap/protocol-room';
+  UserInfoShort as RoomUserInfoShort,
+  Info,
+  EventJson
+} from '@ucap/domain-chat';
+
+import { ChatUtil } from '@ucap/ng-store-chat';
 
 @Component({
   selector: 'app-chat-recent-message',
   templateUrl: './recent-message.component.html',
   styleUrls: ['./recent-message.component.scss']
 })
-export class RecentMessageComponent implements OnInit, AfterViewInit {
+export class RecentMessageComponent implements OnInit {
   @Input()
   senderInfo: RoomUserInfoShort | RoomUserInfo;
+
+  @Input()
+  message: Info<EventJson>;
+
   @Input()
   defaultProfileImage = '';
   @Input()
@@ -31,7 +40,12 @@ export class RecentMessageComponent implements OnInit, AfterViewInit {
 
   ngOnInit() {}
 
-  ngAfterViewInit(): void {}
+  getMessage(message: Info<EventJson>): string {
+    return ChatUtil.convertFinalEventMessage(
+      message.type,
+      message.sentMessageJson
+    );
+  }
 
   onClickGotoBottom(): void {
     this.gotoBottom.emit();
diff --git a/src/app/ucap/chat/components/room-expansion.component.ts b/src/app/ucap/chat/components/room-expansion.component.ts
index 5426c0e..c6452f2 100644
--- a/src/app/ucap/chat/components/room-expansion.component.ts
+++ b/src/app/ucap/chat/components/room-expansion.component.ts
@@ -17,10 +17,16 @@ import {
 import { Store, select } from '@ngrx/store';
 import { Dictionary } from '@ngrx/entity';
 
-import { UserInfo } from '@ucap/protocol-sync';
-import { UserInfoSS, UserInfoF, UserInfoDN } from '@ucap/protocol-query';
-import { RoomInfo, RoomType, UpdateRequest } from '@ucap/protocol-room';
-import { User } from '@ucap/protocol-info';
+import {
+  User,
+  UserInfo,
+  UserInfoSS,
+  UserInfoF,
+  UserInfoDN
+} from '@ucap/domain-organization';
+import { RoomInfo, RoomType } from '@ucap/domain-chat';
+
+import { UpdateRequest } from '@ucap/protocol-room';
 
 import { UserSelector } from '@ucap/ng-store-organization';
 import {
@@ -30,7 +36,7 @@ import {
   RoomUserShortMap
 } from '@ucap/ng-store-chat';
 
-import { DateService } from '@ucap/ng-ui';
+import { DateService } from '@ucap/ng-ui/date';
 import {
   TranslatePipe as OrganizationTranslate,
   TranslateService
@@ -239,9 +245,10 @@ export class RoomExpansionComponent implements OnInit, OnDestroy {
           roomUsers.existUsers &&
           roomUsers.users.filter(
             (userInfo) =>
-              userInfo.name.indexOf(obj.searchWord) > -1 ||
-              userInfo.nameEn.indexOf(obj.searchWord) > -1 ||
-              userInfo.nameCn.indexOf(obj.searchWord) > -1
+              !!userInfo.isJoinRoom &&
+              (userInfo.name.indexOf(obj.searchWord) > -1 ||
+                userInfo.nameEn.indexOf(obj.searchWord) > -1 ||
+                userInfo.nameCn.indexOf(obj.searchWord) > -1)
           ).length > 0
         ) {
           searchRoomList.push(roomInfo);
diff --git a/src/app/ucap/chat/components/room-list-item-01.component.html b/src/app/ucap/chat/components/room-list-item-01.component.html
index 026c3bb..38fc423 100644
--- a/src/app/ucap/chat/components/room-list-item-01.component.html
+++ b/src/app/ucap/chat/components/room-list-item-01.component.html
@@ -3,7 +3,7 @@
     [roomInfo]="roomInfo"
     [isCurrentRoom]="currentRoomId === roomInfo.roomId"
     [roomName]="getRoomName()"
-    [profileImageRoot]="versionInfo2Res?.profileRoot"
+    [profileImageRoot]="versionInfo?.profileRoot"
     [defaultProfileImage]="
       roomInfo.roomType === RoomType.Multi
         ? defaultProfileImageMulti
@@ -13,6 +13,7 @@
     [checkable]="checkable"
     [checked]="getChecked(roomInfo)"
     [moreable]="moreable"
+    [dateFormat]="dateFormat"
     (toggleItem)="onToggleRoom($event)"
     (openChatRoom)="onOpenChatRoom($event)"
     (toggleAlarm)="onToggleAlarm($event)"
diff --git a/src/app/ucap/chat/components/room-list-item-01.component.ts b/src/app/ucap/chat/components/room-list-item-01.component.ts
index 212a623..d4674cf 100644
--- a/src/app/ucap/chat/components/room-list-item-01.component.ts
+++ b/src/app/ucap/chat/components/room-list-item-01.component.ts
@@ -14,9 +14,8 @@ import {
 
 import { Store, select } from '@ngrx/store';
 
-import { VersionInfo2Response } from '@ucap/api-public';
-import { RoomInfo, RoomType } from '@ucap/protocol-room';
-import { User } from '@ucap/protocol-info';
+import { User } from '@ucap/domain-organization';
+import { RoomInfo, RoomType } from '@ucap/domain-chat';
 
 import { I18nService } from '@ucap/ng-i18n';
 import { UserSelector } from '@ucap/ng-store-organization';
@@ -33,6 +32,7 @@ import {
 } from '@ucap/ng-ui-organization';
 
 import { AppChatService } from '@app/services/app-chat.service';
+import { VersionInfo } from '@ucap/domain-authentication';
 
 @Component({
   selector: 'app-chat-room-list-item-01',
@@ -58,6 +58,9 @@ export class RoomListItem01Component implements OnInit, OnDestroy {
   @Input()
   moreable = true;
 
+  @Input()
+  dateFormat?: string;
+
   @Output()
   toggleItem = new EventEmitter<{
     checked: boolean;
@@ -74,7 +77,7 @@ export class RoomListItem01Component implements OnInit, OnDestroy {
   delRoom = new EventEmitter<RoomInfo>();
 
   user: User;
-  versionInfo2Res: VersionInfo2Response;
+  versionInfo: VersionInfo;
 
   organizationTranslate: OrganizationTranslate;
 
@@ -109,10 +112,10 @@ export class RoomListItem01Component implements OnInit, OnDestroy {
     this.store
       .pipe(
         takeUntil(this.ngOnDestroySubject),
-        select(ConfigurationSelector.versionInfo2Response)
+        select(ConfigurationSelector.versionInfo)
       )
-      .subscribe((versionInfo2Res) => {
-        this.versionInfo2Res = versionInfo2Res;
+      .subscribe((versionInfo) => {
+        this.versionInfo = versionInfo;
       });
 
     combineLatest([
diff --git a/src/app/ucap/chat/components/room-list.component.ts b/src/app/ucap/chat/components/room-list.component.ts
index 7f83a74..a5656a8 100644
--- a/src/app/ucap/chat/components/room-list.component.ts
+++ b/src/app/ucap/chat/components/room-list.component.ts
@@ -14,8 +14,8 @@ import {
 
 import { Store, select } from '@ngrx/store';
 
-import { RoomInfo } from '@ucap/protocol-room';
-import { UserInfoSS } from '@ucap/protocol-query';
+import { UserInfoSS } from '@ucap/domain-organization';
+import { RoomInfo } from '@ucap/domain-chat';
 
 import { RoomSelector } from '@ucap/ng-store-chat';
 
@@ -26,6 +26,20 @@ import { RoomSelector } from '@ucap/ng-store-chat';
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class RoomListComponent implements OnInit, OnDestroy {
+  @Input()
+  set selectedRoom(roomInfo: RoomInfo) {
+    this._selectedRoom = roomInfo;
+    if (!!roomInfo) {
+      this.selectedRoomList = [roomInfo];
+    }
+  }
+
+  get selectedRoom() {
+    return this._selectedRoom;
+  }
+  // tslint:disable-next-line: variable-name
+  _selectedRoom: RoomInfo;
+
   @Input()
   checkable = false;
 
@@ -42,7 +56,6 @@ export class RoomListComponent implements OnInit, OnDestroy {
   toggleRoom: EventEmitter<RoomInfo> = new EventEmitter();
 
   selectedRoomList: RoomInfo[] = [];
-  selectedRoom: RoomInfo;
 
   roomList: RoomInfo[];
 
diff --git a/src/app/ucap/chat/components/room-setting.component.html b/src/app/ucap/chat/components/room-setting.component.html
index e2d16a3..35606a7 100644
--- a/src/app/ucap/chat/components/room-setting.component.html
+++ b/src/app/ucap/chat/components/room-setting.component.html
@@ -64,7 +64,10 @@
           {{ 'chat:dialog.settingTimer' | ucapI18n }}
         </h4>
         <mat-form-field class="form-select-timer">
-          <mat-select (selectionChange)="onChangeSelection($event.value)">
+          <mat-select
+            (selectionChange)="onChangeSelection($event.value)"
+            [value]="roomInfo.timeRoomInterval"
+          >
             <mat-option *ngFor="let timer of timerArray" [value]="timer.value">
               {{ timer.text }}
             </mat-option>
diff --git a/src/app/ucap/chat/components/room-setting.component.ts b/src/app/ucap/chat/components/room-setting.component.ts
index e39af50..8e728be 100644
--- a/src/app/ucap/chat/components/room-setting.component.ts
+++ b/src/app/ucap/chat/components/room-setting.component.ts
@@ -1,3 +1,6 @@
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
 import {
   Component,
   OnInit,
@@ -8,17 +11,19 @@ import {
   ChangeDetectorRef,
   ChangeDetectionStrategy
 } from '@angular/core';
+
+import { Store } from '@ngrx/store';
+
+import { MatSelectChange } from '@angular/material/select';
+import { MatRadioChange } from '@angular/material/radio';
+
 import {
   UserInfo as RoomUserInfo,
   UserInfoShort as RoomUserInfoShort,
   RoomInfo
-} from '@ucap/protocol-room';
+} from '@ucap/domain-chat';
+
 import { I18nService } from '@ucap/ng-i18n';
-import { Store } from '@ngrx/store';
-import { takeUntil } from 'rxjs/operators';
-import { Subject } from 'rxjs';
-import { MatSelectChange } from '@angular/material/select';
-import { MatRadioChange } from '@angular/material/radio';
 
 @Component({
   selector: 'app-chat-room-setting',
diff --git a/src/app/ucap/chat/components/sticker.selector.component.ts b/src/app/ucap/chat/components/sticker.selector.component.ts
index 5b86273..66cb2ad 100644
--- a/src/app/ucap/chat/components/sticker.selector.component.ts
+++ b/src/app/ucap/chat/components/sticker.selector.component.ts
@@ -1,13 +1,4 @@
-import {
-  Component,
-  OnInit,
-  Input,
-  ElementRef,
-  AfterViewInit,
-  Inject,
-  Output,
-  EventEmitter
-} from '@angular/core';
+import { Component, OnInit, Output, EventEmitter } from '@angular/core';
 import {
   StickerInfo,
   StickerFilesInfo,
@@ -23,7 +14,7 @@ import { LocalStorageService } from '@ucap/ng-web-storage';
   templateUrl: './sticker.selector.component.html',
   styleUrls: ['./sticker.selector.component.scss']
 })
-export class StickerSelectorComponent implements OnInit, AfterViewInit {
+export class StickerSelectorComponent implements OnInit {
   @Output()
   selectedSticker = new EventEmitter<StickerFilesInfo>();
 
@@ -56,8 +47,6 @@ export class StickerSelectorComponent implements OnInit, AfterViewInit {
     this.currentTabIndex = 0;
   }
 
-  ngAfterViewInit(): void {}
-
   onSelectedIndexChange(value: number) {
     this.currentTabIndex = value;
   }
diff --git a/src/app/ucap/chat/components/translation.selector.component.scss b/src/app/ucap/chat/components/translation.selector.component.scss
index bedd0b9..8e47cda 100644
--- a/src/app/ucap/chat/components/translation.selector.component.scss
+++ b/src/app/ucap/chat/components/translation.selector.component.scss
@@ -100,7 +100,7 @@
         border: solid 3px #ffffff;
         background-image: linear-gradient(225deg, #fadfaa 13%, #f92465 95%);
         font-size: 1.714em;
-        position: fixed;
+        position: absolute;
         z-index: 10;
         right: 20px;
         border-radius: 50%;
diff --git a/src/app/ucap/chat/components/translation.selector.component.ts b/src/app/ucap/chat/components/translation.selector.component.ts
index f9bf62a..4bd7e3e 100644
--- a/src/app/ucap/chat/components/translation.selector.component.ts
+++ b/src/app/ucap/chat/components/translation.selector.component.ts
@@ -1,23 +1,19 @@
-import {
-  Component,
-  OnInit,
-  AfterViewInit,
-  EventEmitter,
-  Output,
-  Input
-} from '@angular/core';
-import { MatSelectChange } from '@angular/material/select';
+import { Component, OnInit, EventEmitter, Output, Input } from '@angular/core';
 import { FormGroup, FormBuilder } from '@angular/forms';
-import { TranslationSaveResponse } from '@ucap/api-common';
-import { EventType } from '@ucap/protocol-event';
+
+import { MatSelectChange } from '@angular/material/select';
 import { MatSlideToggleChange } from '@angular/material/slide-toggle';
 
+import { EventType } from '@ucap/domain-chat';
+
+import { TranslationSaveResponse } from '@ucap/api-common';
+
 @Component({
   selector: 'app-chat-selector-translation',
   templateUrl: './translation.selector.component.html',
   styleUrls: ['./translation.selector.component.scss']
 })
-export class TranslationSelectorComponent implements OnInit, AfterViewInit {
+export class TranslationSelectorComponent implements OnInit {
   @Input()
   destLocale: string;
 
@@ -177,8 +173,6 @@ export class TranslationSelectorComponent implements OnInit, AfterViewInit {
     this.isShowTranslationPreview = this.preView;
   }
 
-  ngAfterViewInit(): void {}
-
   onClickClose(): void {
     this.closed.emit();
   }
diff --git a/src/app/ucap/group/components/expansion-01.component.html b/src/app/ucap/group/components/expansion-01.component.html
index baffc5f..e3caa62 100644
--- a/src/app/ucap/group/components/expansion-01.component.html
+++ b/src/app/ucap/group/components/expansion-01.component.html
@@ -7,6 +7,7 @@
     [favorites]="getFavoritesForShowType()"
     [groupBuddies]="getBuddiesForShowType()"
     [selectedUserList]="selectedUserList"
+    [groupOpenInfo]="groupOpenInfo"
     [moreable]="!!showType && showType === 'ON_OFF' ? true : false"
     (clickMoreMenu)="onClickMoreMenu($event)"
     (clickNode)="onClickNode($event)"
@@ -18,13 +19,14 @@
             ? 'current-user'
             : ''
         "
+        [user]="user"
         [userInfo]="node.userInfo"
         [group]="node.groupDetail"
         [isMe]="String(user?.info?.seq) === String(node.userInfo.seq)"
-        (moreMenu)="onClikeMoreProfile($event)"
-        (floatingProfileMenu)="onFloatingProfileMenu($event)"
+        (clickMoreMenu)="onClikeMoreProfile($event)"
+        (clickProfileMenu)="onClickProfileMenu($event)"
         (click)="onClickUser($event, node.userInfo)"
-        (openProfile)="onClickUser(null, node.userInfo)"
+        (openProfile)="onOpenProfile(node.userInfo)"
       ></app-group-profile-list-item-02>
     </ng-template>
 
@@ -74,8 +76,8 @@
     <button mat-menu-item style="display: none;"></button>
     <button
       mat-menu-item
-      *ngIf="getShowGroupContextMenu('CHAT', group)"
-      (click)="onSelectGroupMenu('CHAT', group)"
+      *ngIf="getShowGroupContextMenu(GroupMenuType.chat, group)"
+      (click)="onSelectGroupMenu(GroupMenuType.chat, group)"
     >
       <mat-icon matPrefix class="material-icons-outlined"
         >question_answer</mat-icon
@@ -83,49 +85,51 @@
     </button>
     <button
       mat-menu-item
-      *ngIf="getShowGroupContextMenu('SEND_MESSAGE', group)"
-      (click)="onSelectGroupMenu('SEND_MESSAGE', group)"
+      *ngIf="getShowGroupContextMenu(GroupMenuType.message, group)"
+      (click)="onSelectGroupMenu(GroupMenuType.message, group)"
     >
       <mat-icon matPrefix class="material-icons-outlined">send</mat-icon
       >{{ 'group:contextMenu.sendMessageToGroup' | ucapI18n }}
     </button>
-    <mat-divider *ngIf="getShowGroupContextMenu('DIV1', group)"></mat-divider>
+    <mat-divider
+      *ngIf="getShowGroupContextMenu(GroupMenuType.divide, group)"
+    ></mat-divider>
     <button
       mat-menu-item
-      *ngIf="getShowGroupContextMenu('RENAME', group)"
-      (click)="onSelectGroupMenu('RENAME', group)"
+      *ngIf="getShowGroupContextMenu(GroupMenuType.rename, group)"
+      (click)="onSelectGroupMenu(GroupMenuType.rename, group)"
     >
       <mat-icon matPrefix class="material-icons-outlined">create</mat-icon
       >{{ 'group:contextMenu.changeGroupName' | ucapI18n }}
     </button>
     <button
       mat-menu-item
-      *ngIf="getShowGroupContextMenu('MANAGE_MEMBER', group)"
-      (click)="onSelectGroupMenu('MANAGE_MEMBER', group)"
+      *ngIf="getShowGroupContextMenu(GroupMenuType.management, group)"
+      (click)="onSelectGroupMenu(GroupMenuType.management, group)"
     >
       <mat-icon matPrefix>people_outline</mat-icon
       >{{ 'group:contextMenu.groupMemberManagement' | ucapI18n }}
     </button>
     <button
       mat-menu-item
-      *ngIf="getShowGroupContextMenu('COPY_MEMBER', group)"
-      (click)="onSelectGroupMenu('COPY_MEMBER', group)"
+      *ngIf="getShowGroupContextMenu(GroupMenuType.copyGroup, group)"
+      (click)="onSelectGroupMenu(GroupMenuType.copyGroup, group)"
     >
       <mat-icon matPrefix>people_outline</mat-icon
       >{{ 'group:contextMenu.copyGroupMember' | ucapI18n }}
     </button>
     <button
       mat-menu-item
-      *ngIf="getShowGroupContextMenu('MOVE_MEMBER', group)"
-      (click)="onSelectGroupMenu('MOVE_MEMBER', group)"
+      *ngIf="getShowGroupContextMenu(GroupMenuType.moveGroup, group)"
+      (click)="onSelectGroupMenu(GroupMenuType.moveGroup, group)"
     >
       <mat-icon matPrefix>wrap_text</mat-icon
       >{{ 'group:contextMenu.moveGroupMember' | ucapI18n }}
     </button>
     <button
       mat-menu-item
-      *ngIf="getShowGroupContextMenu('DELETE', group)"
-      (click)="onSelectGroupMenu('DELETE', group)"
+      *ngIf="getShowGroupContextMenu(GroupMenuType.deleteGroup, group)"
+      (click)="onSelectGroupMenu(GroupMenuType.deleteGroup, group)"
     >
       <mat-icon matPrefix>delete_outline</mat-icon
       >{{ 'group:contextMenu.removeGroup' | ucapI18n }}
@@ -150,7 +154,13 @@
     <button
       mat-menu-item
       (click)="
-        onClickProfileContextMenu($event, 'VIEW_PROFILE', userInfo, group, rect)
+        onClickProfileContextMenu(
+          $event,
+          ProfileMenuType.profile,
+          userInfo,
+          group,
+          rect
+        )
       "
     >
       <mat-icon matPrefix>face</mat-icon
@@ -158,11 +168,11 @@
     </button>
     <button
       mat-menu-item
-      *ngIf="getShowProfileContextMenu('REGISTER_FAVORITE', group)"
+      *ngIf="getShowProfileContextMenu(ProfileMenuType.favorite, group)"
       (click)="
         onClickProfileContextMenu(
           $event,
-          'REGISTER_FAVORITE',
+          ProfileMenuType.favorite,
           userInfo,
           group,
           rect
@@ -181,11 +191,11 @@
     </button>
     <button
       mat-menu-item
-      *ngIf="getShowProfileContextMenu('REGISTER_NICKNAME', group)"
+      *ngIf="getShowProfileContextMenu(ProfileMenuType.nickname, group)"
       (click)="
         onClickProfileContextMenu(
           $event,
-          'REGISTER_NICKNAME',
+          ProfileMenuType.nickname,
           userInfo,
           group,
           rect
@@ -197,9 +207,15 @@
     </button>
     <button
       mat-menu-item
-      *ngIf="getShowProfileContextMenu('COPY_BUDDY', group)"
+      *ngIf="getShowProfileContextMenu(ProfileMenuType.copyBuddy, group)"
       (click)="
-        onClickProfileContextMenu($event, 'COPY_BUDDY', userInfo, group, rect)
+        onClickProfileContextMenu(
+          $event,
+          ProfileMenuType.copyBuddy,
+          userInfo,
+          group,
+          rect
+        )
       "
     >
       <mat-icon matPrefix>people_outline</mat-icon
@@ -207,9 +223,15 @@
     </button>
     <button
       mat-menu-item
-      *ngIf="getShowProfileContextMenu('MOVE_BUDDY', group)"
+      *ngIf="getShowProfileContextMenu(ProfileMenuType.moveBuddy, group)"
       (click)="
-        onClickProfileContextMenu($event, 'MOVE_BUDDY', userInfo, group, rect)
+        onClickProfileContextMenu(
+          $event,
+          ProfileMenuType.moveBuddy,
+          userInfo,
+          group,
+          rect
+        )
       "
     >
       <mat-icon matPrefix>wrap_text</mat-icon
@@ -217,9 +239,15 @@
     </button>
     <button
       mat-menu-item
-      *ngIf="getShowProfileContextMenu('REMOVE_BUDDY', group)"
+      *ngIf="getShowProfileContextMenu(ProfileMenuType.removeBuddy, group)"
       (click)="
-        onClickProfileContextMenu($event, 'REMOVE_BUDDY', userInfo, group, rect)
+        onClickProfileContextMenu(
+          $event,
+          ProfileMenuType.removeBuddy,
+          userInfo,
+          group,
+          rect
+        )
       "
     >
       <mat-icon matPrefix>delete</mat-icon
diff --git a/src/app/ucap/group/components/expansion-01.component.ts b/src/app/ucap/group/components/expansion-01.component.ts
index 45ca490..e382f66 100644
--- a/src/app/ucap/group/components/expansion-01.component.ts
+++ b/src/app/ucap/group/components/expansion-01.component.ts
@@ -20,13 +20,16 @@ import { Store, select } from '@ngrx/store';
 
 import { MatMenuTrigger } from '@angular/material/menu';
 
-import { StatusCode, PresenceType } from '@ucap/core';
-import { VersionInfo2Response } from '@ucap/api-public';
-import { StatusBulkInfo } from '@ucap/protocol-status';
-import { UserInfo, GroupDetailData } from '@ucap/protocol-sync';
-import { UserInfoSS, UserInfoF, UserInfoDN } from '@ucap/protocol-query';
-import { UserInfo as RoomUserInfo } from '@ucap/protocol-room';
-import { User } from '@ucap/protocol-info';
+import {
+  User,
+  UserInfo,
+  UserInfoSS,
+  UserInfoF,
+  UserInfoDN
+} from '@ucap/domain-organization';
+import { StatusCode, PresenceType, StatusBulkInfo } from '@ucap/domain-status';
+import { GroupInfoDetail } from '@ucap/domain-group';
+import { UserInfo as RoomUserInfo } from '@ucap/domain-chat';
 
 import { LogService } from '@ucap/ng-logger';
 import { I18nService } from '@ucap/ng-i18n';
@@ -38,23 +41,20 @@ import {
   ExpansionComponent as UcapExpansionComponent,
   NodeType,
   FlatNode,
-  GroupNode
+  GroupNode,
+  GroupMenuType
 } from '@ucap/ng-ui-group';
-import { PresenceUtil } from '@ucap/ng-ui-organization';
+import { PresenceUtil, ProfileMenuType } from '@ucap/ng-ui-organization';
 
-import { AppAuthenticationService } from '@app/services/app-authentication.service';
 import { LoginSession } from '@app/models/login-session';
 
 import { environment } from '@environments';
 import { GroupOpenInfo } from '@app/models/group-open-info';
 import { SortViewType } from '@app/pages/group/types/sort-view.type';
-
-export type UserInfoTypes =
-  | UserInfo
-  | UserInfoSS
-  | UserInfoF
-  | UserInfoDN
-  | RoomUserInfo;
+import { UserInfoTypes } from '@app/types';
+import { AppGroupService } from '@app/services/app-group.service';
+import { VersionInfo } from '@ucap/domain-authentication';
+import { GroupDetailData } from '@ucap/protocol-sync';
 
 @Component({
   selector: 'app-group-expansion-01',
@@ -67,7 +67,17 @@ export class Expansion01Component implements OnInit, OnDestroy, AfterViewInit {
   selectedUserList: UserInfoTypes[];
 
   @Input()
-  showType: SortViewType;
+  set showType(type: SortViewType) {
+    if (!!this.loginSession && !!this.loginSession.groupInfo) {
+      this.loginSession.groupInfo.showType = type;
+    }
+    this._showType = type;
+  }
+  get showType() {
+    return this._showType;
+  }
+  // tslint:disable-next-line: variable-name
+  _showType: SortViewType;
 
   @Input()
   loginSession: LoginSession;
@@ -78,18 +88,21 @@ export class Expansion01Component implements OnInit, OnDestroy, AfterViewInit {
   @Output()
   clicked = new EventEmitter<{ event: MouseEvent; userInfo: UserInfoTypes }>();
 
+  @Output()
+  openProfile = new EventEmitter<UserInfoTypes>();
+
   @Output()
   selectGroupMenu = new EventEmitter<{
-    menuType: string;
-    groupBuddyList: { group: GroupDetailData; buddyList: UserInfo[] };
+    menuType: GroupMenuType;
+    groupBuddyList: { group: GroupInfoDetail; buddyList: UserInfoF[] };
     rect: any;
   }>();
 
   @Output()
   selectProfileMenu: EventEmitter<{
-    menuType: string;
+    menuType: ProfileMenuType;
     userInfo: UserInfoF;
-    group: GroupDetailData;
+    group: GroupInfoDetail;
     rect: any;
   }> = new EventEmitter();
 
@@ -104,13 +117,13 @@ export class Expansion01Component implements OnInit, OnDestroy, AfterViewInit {
   @Output()
   toggleCheckGroup = new EventEmitter<{
     isChecked: boolean;
-    groupBuddyList: { group: GroupDetailData; buddyList: UserInfo[] };
+    groupBuddyList: { group: GroupInfoDetail; buddyList: UserInfo[] };
   }>();
 
   @Output()
-  floatingProfileMenu = new EventEmitter<{
-    menuType: string;
-    userInfo: UserInfoF;
+  clickProfileMenu = new EventEmitter<{
+    menuType: ProfileMenuType;
+    userInfo: UserInfoTypes;
   }>();
 
   @Output()
@@ -131,12 +144,12 @@ export class Expansion01Component implements OnInit, OnDestroy, AfterViewInit {
   profileContextMenuTrigger: MatMenuTrigger;
   profileContextMenuPosition = { x: '0px', y: '0px' };
 
-  versionInfo2Res: VersionInfo2Response;
+  versionInfo: VersionInfo;
   user: User;
 
   groupMenuEvent: MouseEvent;
   statusBulkInfos: StatusBulkInfo[];
-  currentSelectUser: UserInfo;
+  currentSelectUser: UserInfoF;
 
   displayOrder: NodeType[] = [
     NodeType.Profile,
@@ -145,28 +158,29 @@ export class Expansion01Component implements OnInit, OnDestroy, AfterViewInit {
     NodeType.Default
   ];
 
-  favorites: UserInfo[];
-  onlineFavorites: UserInfo[];
+  favorites: UserInfoF[];
+  onlineFavorites: UserInfoF[];
 
-  groupBuddies: { group: GroupDetailData; buddyList: UserInfo[] }[];
-  onlineBuddies: { group: GroupDetailData; buddyList: UserInfo[] }[];
-  onOffBuddies: { group: GroupDetailData; buddyList: UserInfo[] }[];
+  groupBuddies: { group: GroupInfoDetail; buddyList: UserInfoF[] }[];
+  onlineBuddies: { group: GroupInfoDetail; buddyList: UserInfoF[] }[];
+  onOffBuddies: { group: GroupInfoDetail; buddyList: UserInfoF[] }[];
 
   groupOpenInfo: GroupOpenInfo;
 
-  editablGroup: GroupDetailData = null;
-
+  editablGroup: GroupInfoDetail = null;
+  ProfileMenuType = ProfileMenuType;
+  GroupMenuType = GroupMenuType;
   String = String;
 
   private ngOnDestroySubject: Subject<void> = new Subject();
 
   constructor(
-    private appAuthenticationService: AppAuthenticationService,
     private store: Store<any>,
     private changeDetectorRef: ChangeDetectorRef,
     private logService: LogService,
     private i18nService: I18nService,
-    @Self() private elementRef: ElementRef
+    @Self() private elementRef: ElementRef,
+    private appGroupService: AppGroupService
   ) {}
 
   ngOnInit(): void {
@@ -175,10 +189,10 @@ export class Expansion01Component implements OnInit, OnDestroy, AfterViewInit {
     this.store
       .pipe(
         takeUntil(this.ngOnDestroySubject),
-        select(ConfigurationSelector.versionInfo2Response)
+        select(ConfigurationSelector.versionInfo)
       )
-      .subscribe((versionInfo2Res) => {
-        this.versionInfo2Res = versionInfo2Res;
+      .subscribe((versionInfo) => {
+        this.versionInfo = versionInfo;
       });
 
     this.store
@@ -198,6 +212,15 @@ export class Expansion01Component implements OnInit, OnDestroy, AfterViewInit {
         groups = groups || [];
         bulkInfos = bulkInfos || [];
 
+        if (buddies.length === 0 || groups.length === 0) {
+          return;
+        }
+
+        buddies = this.appGroupService.extractBuddiesFromGroups(
+          buddies,
+          groups
+        );
+
         const favorites = buddies
           .filter((buddy) => buddy.isFavorit)
           .sort((a, b) => (a.name < b.name ? -1 : a.name > b.name ? 1 : 0));
@@ -210,8 +233,11 @@ export class Expansion01Component implements OnInit, OnDestroy, AfterViewInit {
             );
 
             if (!!tempBulkInfo && tempBulkInfo.length > 0) {
-              const pcStatus = tempBulkInfo[0].pcStatus;
-              if (pcStatus === StatusCode.OnLine) {
+              const pcOnline = PresenceUtil.isOnline(
+                tempBulkInfo[0],
+                PresenceType.PC
+              );
+              if (!!pcOnline) {
                 return favorite;
               }
             }
@@ -223,9 +249,9 @@ export class Expansion01Component implements OnInit, OnDestroy, AfterViewInit {
           this.changeDetectorRef.markForCheck();
         }
 
-        const tempOrder: GroupDetailData[] = [];
-        let defaultGroup: GroupDetailData;
-        const buddyGroup: GroupDetailData[] = [];
+        const tempOrder: GroupInfoDetail[] = [];
+        let defaultGroup: GroupInfoDetail;
+        const buddyGroup: GroupInfoDetail[] = [];
         groups.forEach((group) => {
           if (0 === group.seq) {
             defaultGroup = group;
@@ -276,10 +302,12 @@ export class Expansion01Component implements OnInit, OnDestroy, AfterViewInit {
                     (bulk) => bulk.userSeq === buddy.seq + ''
                   );
                   if (!!tempBulkinfos && tempBulkinfos.length > 0) {
-                    const pcStatus = tempBulkinfos[0].pcStatus;
-                    const mStatus = tempBulkinfos[0].mobileStatus;
+                    const pcOnline = PresenceUtil.isOnline(
+                      tempBulkinfos[0],
+                      PresenceType.PC
+                    );
 
-                    if (pcStatus === StatusCode.OnLine) {
+                    if (!!pcOnline) {
                       return tempBuddyList.push(buddy);
                     }
                   }
@@ -295,17 +323,21 @@ export class Expansion01Component implements OnInit, OnDestroy, AfterViewInit {
             SENDER_SEQ: String(this.user.info.seq),
             SSVC_TYPE: 5,
             SVC_TYPE: 82,
-            seq: -998,
-            name: this.i18nService.t('group:label.online'),
-            isActive: true
+            detailData: {
+              seq: -998,
+              name: this.i18nService.t('group:label.online'),
+              isActive: true
+            }
           } as GroupDetailData;
           const offlineGroup = {
             SENDER_SEQ: String(this.user.info.seq),
             SSVC_TYPE: 5,
             SVC_TYPE: 82,
-            seq: -999,
-            name: this.i18nService.t('group:label.offline'),
-            isActive: true
+            detailData: {
+              seq: -999,
+              name: this.i18nService.t('group:label.offline'),
+              isActive: true
+            }
           } as GroupDetailData;
 
           const tempGroups = [onlineGroup, offlineGroup];
@@ -313,35 +345,26 @@ export class Expansion01Component implements OnInit, OnDestroy, AfterViewInit {
           for (const group of tempGroups) {
             const tempBuddyList = [];
             this.onOffBuddies.push({
-              group,
+              group: group.detailData,
               buddyList: buddies.filter((buddy) => {
                 const tempBulkinfos = bulkInfos.filter(
                   (bulk) => bulk.userSeq + '' === buddy.seq + ''
                 );
                 if (!!tempBulkinfos && tempBulkinfos.length > 0) {
-                  const pcStatus = tempBulkinfos[0].pcStatus;
-                  const mStatus = tempBulkinfos[0].mobileStatus;
-
-                  if (
-                    group.name.localeCompare(
-                      this.i18nService.t('group:label.online')
-                    ) === 0
-                  ) {
-                    if (pcStatus === StatusCode.OnLine) {
-                      return tempBuddyList.push(buddy);
-                    }
-                  } else if (
-                    group.name.localeCompare(
-                      this.i18nService.t('group:label.offline')
-                    ) === 0
-                  ) {
-                    if (
-                      pcStatus === StatusCode.Offline &&
-                      (mStatus === StatusCode.Offline ||
-                        mStatus === StatusCode.OnLine)
-                    ) {
-                      return tempBuddyList.push(buddy);
-                    }
+                  const pcOnline = PresenceUtil.isOnline(
+                    tempBulkinfos[0],
+                    PresenceType.PC
+                  );
+                  const checkOnline = group.detailData.name.localeCompare(
+                    this.i18nService.t('group:label.online')
+                  );
+                  const checkOffline = group.detailData.name.localeCompare(
+                    this.i18nService.t('group:label.offline')
+                  );
+                  if (!!pcOnline && checkOnline === 0) {
+                    return tempBuddyList.push(buddy);
+                  } else if (!pcOnline && checkOffline === 0) {
+                    return tempBuddyList.push(buddy);
                   }
                 }
               })
@@ -378,45 +401,55 @@ export class Expansion01Component implements OnInit, OnDestroy, AfterViewInit {
   onClickNode(params: { node: FlatNode; isExpand }) {
     // const findSeq = this.groupOpenInfo.groupSeqs.filter(seq => node.node.groupDetail.seq === seq)[0];
     const group = params.node.node.groupDetail;
+    const lastGroupSeq = group.seq;
+    const showType = this.showType;
+    let tempGroupSeqs: number[] = [];
 
     const i = this.groupOpenInfo.groupSeqs.findIndex(
       (seq) => seq === group.seq
     );
+
     if (!!params.isExpand) {
+      tempGroupSeqs = [...this.groupOpenInfo.groupSeqs];
+
       if (-1 === i) {
-        this.groupOpenInfo.groupSeqs.push(group.seq);
+        tempGroupSeqs.push(params.node.node.groupDetail.seq);
       }
     } else {
       if (-1 < i) {
-        this.groupOpenInfo.groupSeqs = this.groupOpenInfo.groupSeqs.filter(
+        tempGroupSeqs = this.groupOpenInfo.groupSeqs.filter(
           (seq) => seq !== group.seq
         );
       }
     }
 
-    if (
-      this.groupExpansion &&
-      !!this.groupOpenInfo &&
-      this.groupOpenInfo.groupSeqs.length > 0
-    ) {
-      this.groupExpansion.groupOpenInfos = this.groupOpenInfo.groupSeqs;
-    }
+    this.groupOpenInfo = {
+      ...this.groupOpenInfo,
+      groupSeqs: tempGroupSeqs,
+      lastGroupSeq,
+      showType
+    };
   }
 
   onProfileMenu(
     event: MouseEvent,
     userInfo: UserInfoTypes,
-    group: GroupDetailData,
+    group: GroupInfoDetail,
     isSearchData: boolean
   ) {
     this.profileMenu.emit({ event, userInfo, group, isSearchData });
   }
 
-  onClickUser(event: MouseEvent, userInfo: UserInfo) {
+  onClickUser(event: MouseEvent, userInfo: UserInfoF) {
     this.currentSelectUser = userInfo;
     this.clicked.emit({ event, userInfo });
   }
 
+  onOpenProfile(userInfo: UserInfoF) {
+    this.currentSelectUser = userInfo;
+    this.openProfile.emit(userInfo);
+  }
+
   getNodeGroupStatus(groupNode: GroupNode): string {
     if (
       !!groupNode &&
@@ -476,7 +509,7 @@ export class Expansion01Component implements OnInit, OnDestroy, AfterViewInit {
     this.groupContextMenuTrigger.openMenu();
   }
 
-  onShowEditGroup(group: GroupDetailData) {
+  onShowEditGroup(group: GroupInfoDetail) {
     const x = this.groupMenuEvent.clientX - 20;
     const y = this.groupMenuEvent.clientY - 30;
 
@@ -496,16 +529,147 @@ export class Expansion01Component implements OnInit, OnDestroy, AfterViewInit {
     this.groupExpansion.expandLess();
   }
 
-  getShowGroupContextMenu(menuType: string, group: GroupDetailData) {
+  onSelectGroupMenu(menuType: GroupMenuType, group: GroupInfoDetail) {
+    let rect: any;
+
+    if (menuType === GroupMenuType.rename) {
+      const target = this.elementRef.nativeElement.querySelector(
+        '.mat-tree-node'
+      );
+      const clickEventY = this.groupMenuEvent.clientY;
+      const clientRect = target.getBoundingClientRect();
+
+      rect = {
+        width: clientRect.width,
+        height: clientRect.height,
+        top: clickEventY - 100 + clientRect.height,
+        left: clientRect.left,
+        bottom: clientRect.bottom,
+        right: clientRect.right
+      };
+    }
+
+    let groupBuddyList: { group: GroupInfoDetail; buddyList: UserInfoF[] }[];
+
+    if (group.seq === -9999) {
+      groupBuddyList = [];
+      groupBuddyList.push({ group, buddyList: this.favorites });
+    } else {
+      groupBuddyList = this.groupBuddies.filter(
+        (g) => g.group.seq === group.seq
+      );
+    }
+
+    this.selectGroupMenu.emit({
+      menuType,
+      groupBuddyList: groupBuddyList[0],
+      rect
+    });
+  }
+
+  getFavoritesForShowType(): UserInfoF[] {
+    if (!!this.showType && this.showType === SortViewType.all) {
+      return this.favorites;
+    } else if (!!this.showType && this.showType === SortViewType.onlineBuddy) {
+      return this.onlineFavorites;
+    } else if (!!this.showType && this.showType === SortViewType.onOff) {
+      return null;
+    }
+    return null;
+  }
+
+  getBuddiesForShowType(): {
+    group: GroupInfoDetail;
+    buddyList: UserInfoF[];
+  }[] {
+    if (!!this.showType && this.showType === SortViewType.all) {
+      return this.groupBuddies;
+    } else if (!!this.showType && this.showType === SortViewType.onlineBuddy) {
+      return this.onlineBuddies;
+    } else if (!!this.showType && this.showType === SortViewType.onOff) {
+      return this.onOffBuddies;
+    }
+    return null;
+  }
+
+  onClikeMoreProfile(params: {
+    event: MouseEvent;
+    userInfo: UserInfoTypes;
+    group: GroupInfoDetail;
+    rect: any;
+  }) {
+    params.event.preventDefault();
+    params.event.stopPropagation();
+
+    this.profileContextMenuPosition.x = params.event.clientX + 'px';
+    this.profileContextMenuPosition.y = params.event.clientY + 'px';
+    this.profileContextMenuTrigger.menu.focusFirstItem('mouse');
+    this.profileContextMenuTrigger.menuData = {
+      userInfo: params.userInfo,
+      group: params.group,
+      rect: params.rect
+    };
+    this.profileContextMenuTrigger.openMenu();
+  }
+
+  onClickProfileMenu(params: {
+    menuType: ProfileMenuType;
+    userInfo: UserInfoTypes;
+  }) {
+    this.clickProfileMenu.emit(params);
+  }
+
+  onClickProfileContextMenu(
+    event: MouseEvent,
+    menuType: ProfileMenuType,
+    userInfo: UserInfoF,
+    group: GroupInfoDetail,
+    rect: any
+  ) {
+    const clientRect = {
+      width: rect.width,
+      height: rect.height,
+      top: rect.top,
+      left: rect.left,
+      right: rect.right,
+      bottom: rect.bottom
+    };
+
+    if (menuType === ProfileMenuType.profile) {
+      this.onClickUser(event, userInfo as UserInfoF);
+    }
+
+    this.selectProfileMenu.emit({
+      menuType,
+      userInfo,
+      group,
+      rect: clientRect
+    });
+
+    this.profileContextMenuTrigger.closeMenu();
+  }
+
+  getGroupNameBySeq(group: GroupInfoDetail): string {
+    if (!!group && group.seq === 0) {
+      return this.i18nService.t('group:category.default');
+    } else if (!!group && group.seq === -9999) {
+      return this.i18nService.t('group:category.favorite');
+    }
+
+    return '';
+  }
+
+  getShowGroupContextMenu(menuType: GroupMenuType, group: GroupInfoDetail) {
     // 즐겨찾기 그룹 숨김메뉴
     if (
-      menuType === 'DIV1' ||
-      menuType === 'RENAME' ||
-      menuType === 'MANAGE_MEMBER' ||
-      menuType === 'COPY_MEMBER' ||
-      menuType === 'MOVE_MEMBER' ||
-      menuType === 'DELETE'
+      menuType === GroupMenuType.divide ||
+      menuType === GroupMenuType.rename ||
+      menuType === GroupMenuType.management ||
+      menuType === GroupMenuType.copyGroup ||
+      menuType === GroupMenuType.moveGroup ||
+      menuType === GroupMenuType.deleteGroup
     ) {
+      const favoriteName = this.i18nService.t('group:category.favorite');
       if (
         !group ||
         group === undefined ||
@@ -527,7 +691,10 @@ export class Expansion01Component implements OnInit, OnDestroy, AfterViewInit {
     }
 
     // 기본 그룹 숨김메뉴
-    if (menuType === 'RENAME' || menuType === 'DELETE') {
+    if (
+      menuType === GroupMenuType.rename ||
+      menuType === GroupMenuType.deleteGroup
+    ) {
       if (!!group && group.seq === 0) {
         return false;
       }
@@ -535,11 +702,11 @@ export class Expansion01Component implements OnInit, OnDestroy, AfterViewInit {
 
     // 그룹원 0명인 그룹 메뉴 정리
     if (
-      menuType === 'CHAT' ||
-      menuType === 'SEND_MESSAGE' ||
-      menuType === 'DIV1' ||
-      menuType === 'COPY_MEMBER' ||
-      menuType === 'MOVE_MEMBER'
+      menuType === GroupMenuType.chat ||
+      menuType === GroupMenuType.message ||
+      menuType === GroupMenuType.divide ||
+      menuType === GroupMenuType.copyGroup ||
+      menuType === GroupMenuType.moveGroup
     ) {
       if (!!group && !!group.userSeqs && group.userSeqs.length > 0) {
         return true;
@@ -550,151 +717,40 @@ export class Expansion01Component implements OnInit, OnDestroy, AfterViewInit {
 
     return true;
   }
-
-  onSelectGroupMenu(menuType: string, group: GroupDetailData) {
-    let rect: any;
-
-    if (menuType.localeCompare('RENAME') === 0) {
-      const target = this.elementRef.nativeElement.querySelector(
-        '.mat-tree-node'
-      );
-      const clickEventY = this.groupMenuEvent.clientY;
-      const clientRect = target.getBoundingClientRect();
-
-      rect = {
-        width: clientRect.width,
-        height: clientRect.height,
-        top: clickEventY - 100 + clientRect.height,
-        left: clientRect.left,
-        bottom: clientRect.bottom,
-        right: clientRect.right
-      };
-    }
-
-    let groupBuddyList: { group: GroupDetailData; buddyList: UserInfo[] }[];
-
-    if (group.seq === -9999) {
-      groupBuddyList = [];
-      groupBuddyList.push({ group, buddyList: this.favorites });
-    } else {
-      groupBuddyList = this.groupBuddies.filter(
-        (g) => g.group.seq === group.seq
-      );
-    }
-
-    this.selectGroupMenu.emit({
-      menuType,
-      groupBuddyList: groupBuddyList[0],
-      rect
-    });
-  }
-
-  getFavoritesForShowType(): UserInfo[] {
-    if (!!this.showType && this.showType === SortViewType.all) {
-      return this.favorites;
-    } else if (!!this.showType && this.showType === SortViewType.onlineBuddy) {
-      return this.onlineFavorites;
-    } else if (!!this.showType && this.showType === SortViewType.onOff) {
-      return null;
-    }
-    return null;
-  }
-
-  getBuddiesForShowType(): { group: GroupDetailData; buddyList: UserInfo[] }[] {
-    if (!!this.showType && this.showType === SortViewType.all) {
-      return this.groupBuddies;
-    } else if (!!this.showType && this.showType === SortViewType.onlineBuddy) {
-      return this.onlineBuddies;
-    } else if (!!this.showType && this.showType === SortViewType.onOff) {
-      return this.onOffBuddies;
-    }
-    return null;
-  }
-
-  onClikeMoreProfile(params: {
-    event: MouseEvent;
-    userInfo: UserInfoTypes;
-    group: GroupDetailData;
-    rect: any;
-  }) {
-    params.event.preventDefault();
-    params.event.stopPropagation();
-
-    this.profileContextMenuPosition.x = params.event.clientX + 'px';
-    this.profileContextMenuPosition.y = params.event.clientY + 'px';
-    this.profileContextMenuTrigger.menu.focusFirstItem('mouse');
-    this.profileContextMenuTrigger.menuData = {
-      userInfo: params.userInfo,
-      group: params.group,
-      rect: params.rect
-    };
-    this.profileContextMenuTrigger.openMenu();
-  }
-
-  onFloatingProfileMenu(params: { menuType: string; userInfo: UserInfoF }) {
-    this.floatingProfileMenu.emit(params);
-  }
-
-  onClickProfileContextMenu(
-    event: MouseEvent,
-    menuType: string,
-    userInfo: UserInfoF,
-    group: GroupDetailData,
-    rect: any
-  ) {
-    const clientRect = {
-      width: rect.width,
-      height: rect.height,
-      top: rect.top,
-      left: rect.left,
-      right: rect.right,
-      bottom: rect.bottom
-    };
-
-    if (menuType === 'VIEW_PROFILE') {
-      this.onClickUser(event, userInfo as UserInfo);
-    }
-
-    this.selectProfileMenu.emit({
-      menuType,
-      userInfo,
-      group,
-      rect: clientRect
-    });
-
-    this.profileContextMenuTrigger.closeMenu();
-  }
-
-  getGroupNameBySeq(group: GroupDetailData): string {
-    if (!!group && group.seq === 0) {
-      return this.i18nService.t('group:category.default');
-    } else if (!!group && group.seq === -9999) {
-      return this.i18nService.t('group:category.favorite');
-    }
-
-    return '';
-  }
-  onProfileMenuClose(event: MouseEvent) {}
-
-  getShowProfileContextMenu(menuType: string, group: GroupDetailData) {
+  getShowProfileContextMenu(menuType: ProfileMenuType, group: GroupInfoDetail) {
     if (!group || group === undefined) {
       if (
-        menuType === 'REGISTER_FAVORITE' ||
-        menuType === 'SEND_MESSAGE' ||
-        menuType === 'REGISTER_NICKNAME'
+        menuType === ProfileMenuType.favorite ||
+        menuType === ProfileMenuType.message ||
+        menuType === ProfileMenuType.nickname
       ) {
         // continue;
       } else {
         return false;
       }
     }
+
+    if (!!group && group.seq === -9999) {
+      if (
+        menuType === ProfileMenuType.removeBuddy ||
+        menuType === ProfileMenuType.moveBuddy ||
+        menuType === ProfileMenuType.copyBuddy
+      ) {
+        return false;
+      }
+      return true;
+    }
+
     /** 수정불가 그룹 핸들링. */
     if (!!group && !!environment.productConfig.group.fixedGroupSeqs) {
       const fixedGroupSeqs: number[] =
         environment.productConfig.group.fixedGroupSeqs;
       if (!!fixedGroupSeqs && fixedGroupSeqs.length > 0) {
         if (fixedGroupSeqs.indexOf(group.seq) > -1) {
-          if (menuType === 'REMOVE_FROM_GROUP' || menuType === 'MOVE_BUDDY') {
+          if (
+            menuType === ProfileMenuType.removeBuddy ||
+            menuType === ProfileMenuType.moveBuddy
+          ) {
             return false;
           }
         }
@@ -703,7 +759,6 @@ export class Expansion01Component implements OnInit, OnDestroy, AfterViewInit {
 
     return true;
   }
-
   private _groupOpenBySessionInfo() {
     if (
       !!this.loginSession &&
@@ -712,10 +767,14 @@ export class Expansion01Component implements OnInit, OnDestroy, AfterViewInit {
       this.loginSession.groupInfo.groupSeqs.length > 0 &&
       this.groupBuddies.length > 0
     ) {
-      this.groupExpansion.expand(
-        this.loginSession.groupInfo.groupSeqs,
-        this.loginSession.groupInfo.lastGroupSeq
-      );
+      this.showType = this.loginSession.groupInfo.showType;
+
+      const groupInfo = this.loginSession.groupInfo;
+
+      this.groupExpansion.expand({
+        groupSeqs: groupInfo.groupSeqs,
+        lastGroupSeq: groupInfo.lastGroupSeq
+      });
     }
   }
 }
diff --git a/src/app/ucap/group/components/expansion-02.component.html b/src/app/ucap/group/components/expansion-02.component.html
index 6e7601a..f12742f 100644
--- a/src/app/ucap/group/components/expansion-02.component.html
+++ b/src/app/ucap/group/components/expansion-02.component.html
@@ -1,7 +1,6 @@
 <div class="expansion-02-container">
   <ucap-group-expansion
     #groupExpansion
-    [isAllExpand]="true"
     [displayOrder]="displayOrder"
     vsItemSize="60"
     [favorites]="!!favorites ? favorites : null"
@@ -21,9 +20,9 @@
         [checkable]="getCheckableUser(node.userInfo)"
         [isDialog]="isDialog"
         [group]="node.groupDetail"
-        (changeCheckUser)="onChangeCheckUser($event)"
+        (toggleCheckUser)="onToggleCheckUser($event)"
         (click)="onClickUser($event, node.userInfo)"
-        (openProfile)="onClickUser(null, node.userInfo)"
+        (openProfile)="onOpenProfile(node.userInfo)"
       ></app-group-profile-list-item-02>
     </ng-template>
 
diff --git a/src/app/ucap/group/components/expansion-02.component.ts b/src/app/ucap/group/components/expansion-02.component.ts
index b28bb9d..d85e3de 100644
--- a/src/app/ucap/group/components/expansion-02.component.ts
+++ b/src/app/ucap/group/components/expansion-02.component.ts
@@ -17,13 +17,16 @@ import {
 
 import { Store, select } from '@ngrx/store';
 
-import { PresenceType } from '@ucap/core';
-import { VersionInfo2Response } from '@ucap/api-public';
-import { StatusBulkInfo } from '@ucap/protocol-status';
-import { UserInfo, GroupDetailData } from '@ucap/protocol-sync';
-import { UserInfoSS, UserInfoF, UserInfoDN } from '@ucap/protocol-query';
-import { UserInfo as RoomUserInfo } from '@ucap/protocol-room';
-import { User } from '@ucap/protocol-info';
+import {
+  User,
+  UserInfo,
+  UserInfoSS,
+  UserInfoF,
+  UserInfoDN
+} from '@ucap/domain-organization';
+import { PresenceType, StatusBulkInfo } from '@ucap/domain-status';
+import { GroupInfoDetail } from '@ucap/domain-group';
+import { UserInfo as RoomUserInfo } from '@ucap/domain-chat';
 
 import { LogService } from '@ucap/ng-logger';
 import { I18nService } from '@ucap/ng-i18n';
@@ -38,9 +41,9 @@ import {
 } from '@ucap/ng-ui-group';
 import { PresenceUtil } from '@ucap/ng-ui-organization';
 
-import { AppAuthenticationService } from '@app/services/app-authentication.service';
-
 import { environment } from '@environments';
+import { AppGroupService } from '@app/services/app-group.service';
+import { VersionInfo } from '@ucap/domain-authentication';
 
 export type UserInfoTypes =
   | UserInfo
@@ -69,11 +72,14 @@ export class Expansion02Component implements OnInit, OnDestroy {
   fixedUserList: UserInfoTypes[];
 
   @Input()
-  selectedGroupHeader: GroupDetailData;
+  selectedGroupHeader: GroupInfoDetail;
 
   @Output()
   clicked = new EventEmitter<{ event: MouseEvent; userInfo: UserInfoTypes }>();
 
+  @Output()
+  openProfile = new EventEmitter<UserInfoTypes>();
+
   @Output()
   toggleCheckUser: EventEmitter<
     {
@@ -85,19 +91,13 @@ export class Expansion02Component implements OnInit, OnDestroy {
   @Output()
   toggleCheckGroup = new EventEmitter<{
     isChecked: boolean;
-    groupBuddyList: { group: GroupDetailData; buddyList: UserInfo[] };
-  }>();
-
-  @Output()
-  floatingProfileMenu = new EventEmitter<{
-    menuType: string;
-    userInfo: UserInfoF;
+    groupBuddyList: { group: GroupInfoDetail; buddyList: UserInfo[] };
   }>();
 
   @ViewChild('groupExpansion', { static: false })
   groupExpansion: UcapExpansionComponent;
 
-  versionInfo2Res: VersionInfo2Response;
+  versionInfo: VersionInfo;
   user: User;
 
   statusBulkInfos: StatusBulkInfo[];
@@ -111,34 +111,33 @@ export class Expansion02Component implements OnInit, OnDestroy {
   ];
 
   profile: UserInfo;
-  favorites: UserInfo[];
-  groupBuddies: { group: GroupDetailData; buddyList: UserInfo[] }[];
-  onlineBuddies: { group: GroupDetailData; buddyList: UserInfo[] }[];
-  onOffBuddies: { group: GroupDetailData; buddyList: UserInfo[] }[];
+  favorites: UserInfoF[];
+  groupBuddies: { group: GroupInfoDetail; buddyList: UserInfoF[] }[];
+  onlineBuddies: { group: GroupInfoDetail; buddyList: UserInfoF[] }[];
+  onOffBuddies: { group: GroupInfoDetail; buddyList: UserInfoF[] }[];
 
-  editablGroup: GroupDetailData = null;
+  editablGroup: GroupInfoDetail = null;
 
   String = String;
 
   private ngOnDestroySubject: Subject<void> = new Subject();
 
   constructor(
-    private appAuthenticationService: AppAuthenticationService,
     private store: Store<any>,
     private changeDetectorRef: ChangeDetectorRef,
     private logService: LogService,
     private i18nService: I18nService,
-    @Self() private elementRef: ElementRef
+    private appGroupService: AppGroupService
   ) {}
 
   ngOnInit(): void {
     this.store
       .pipe(
         takeUntil(this.ngOnDestroySubject),
-        select(ConfigurationSelector.versionInfo2Response)
+        select(ConfigurationSelector.versionInfo)
       )
-      .subscribe((versionInfo2Res) => {
-        this.versionInfo2Res = versionInfo2Res;
+      .subscribe((versionInfo) => {
+        this.versionInfo = versionInfo;
       });
 
     this.store
@@ -158,6 +157,15 @@ export class Expansion02Component implements OnInit, OnDestroy {
         groups = groups || [];
         bulkInfos = bulkInfos || [];
 
+        if (buddies.length === 0 || groups.length === 0) {
+          return;
+        }
+
+        buddies = this.appGroupService.extractBuddiesFromGroups(
+          buddies,
+          groups
+        );
+
         const favorites = buddies
           .filter((buddy) => buddy.isFavorit)
           .sort((a, b) => (a.name < b.name ? -1 : a.name > b.name ? 1 : 0));
@@ -169,9 +177,9 @@ export class Expansion02Component implements OnInit, OnDestroy {
           this.favorites = undefined;
           this.changeDetectorRef.markForCheck();
         }
-        const tempOrder: GroupDetailData[] = [];
-        let defaultGroup: GroupDetailData;
-        const buddyGroup: GroupDetailData[] = [];
+        const tempOrder: GroupInfoDetail[] = [];
+        let defaultGroup: GroupInfoDetail;
+        const buddyGroup: GroupInfoDetail[] = [];
         groups.forEach((group) => {
           if (0 === group.seq) {
             defaultGroup = group;
@@ -236,6 +244,11 @@ export class Expansion02Component implements OnInit, OnDestroy {
     this.clicked.emit({ event, userInfo });
   }
 
+  onOpenProfile(userInfo: UserInfo) {
+    this.currentSelectUser = userInfo;
+    this.openProfile.emit(userInfo);
+  }
+
   getNodeGroupStatus(groupNode: GroupNode): string {
     if (
       !!this.statusBulkInfos &&
@@ -275,7 +288,7 @@ export class Expansion02Component implements OnInit, OnDestroy {
     this.groupExpansion.expandLess();
   }
 
-  getShowGroupContextMenu(menuType: string, group: GroupDetailData) {
+  getShowGroupContextMenu(menuType: string, group: GroupInfoDetail) {
     // 즐겨찾기 그룹 숨김메뉴
     if (
       menuType === 'DIV1' ||
@@ -327,7 +340,7 @@ export class Expansion02Component implements OnInit, OnDestroy {
   }
 
   /** 개별선택(토글) 이벤트 */
-  onChangeCheckUser(param: { checked: boolean; userInfo: UserInfoSS }) {
+  onToggleCheckUser(param: { checked: boolean; userInfo: UserInfoSS }) {
     this.toggleCheckUser.emit([param]);
   }
 
@@ -359,7 +372,7 @@ export class Expansion02Component implements OnInit, OnDestroy {
 
   onToggleCheckGroup(params: {
     isChecked: boolean;
-    groupBuddyList: { group: GroupDetailData; buddyList: UserInfo[] };
+    groupBuddyList: { group: GroupInfoDetail; buddyList: UserInfo[] };
   }) {
     let trgtUserList = params.groupBuddyList.buddyList;
 
@@ -381,11 +394,7 @@ export class Expansion02Component implements OnInit, OnDestroy {
     }
   }
 
-  onFloatingProfileMenu(params: { menuType: string; userInfo: UserInfoF }) {
-    this.floatingProfileMenu.emit(params);
-  }
-
-  getGroupNameBySeq(group: GroupDetailData): string {
+  getGroupNameBySeq(group: GroupInfoDetail): string {
     if (!!group && group.seq === 0) {
       return this.i18nService.t('group:category.default');
     } else if (!!group && group.seq === -9999) {
@@ -395,7 +404,7 @@ export class Expansion02Component implements OnInit, OnDestroy {
     return '';
   }
 
-  getShowProfileContextMenu(menuType: string, group: GroupDetailData) {
+  getShowProfileContextMenu(menuType: string, group: GroupInfoDetail) {
     if (!group || group === undefined) {
       if (
         menuType === 'REGISTER_FAVORITE' ||
diff --git a/src/app/ucap/group/components/index.ts b/src/app/ucap/group/components/index.ts
index 1d9f49e..11768f5 100644
--- a/src/app/ucap/group/components/index.ts
+++ b/src/app/ucap/group/components/index.ts
@@ -3,6 +3,7 @@ import { Expansion02Component } from './expansion-02.component';
 
 import { ProfileListItem02Component } from './profile-list-item-02.component';
 import { ProfileListItem03Component } from './profile-list-item-03.component';
+import { ProfileListItem04Component } from './profile-list-item-04.component';
 import { ProfileListComponent } from './profile-list.component';
 import { ProfileList01Component } from './profile-list-01.component';
 import { NameInputComponent } from './name-input.component';
@@ -13,6 +14,7 @@ export const COMPONENTS = [
   Expansion02Component,
   ProfileListItem02Component,
   ProfileListItem03Component,
+  ProfileListItem04Component,
   ProfileListComponent,
   ProfileList01Component,
   NameInputComponent,
diff --git a/src/app/ucap/group/components/name-input.component.scss b/src/app/ucap/group/components/name-input.component.scss
index 921e279..bc06c04 100644
--- a/src/app/ucap/group/components/name-input.component.scss
+++ b/src/app/ucap/group/components/name-input.component.scss
@@ -7,7 +7,7 @@
   justify-content: center;
   .img-group-add {
     margin: 10px 0;
-    background-image: url(../../../../assets/images/bg/bg_group_add.png);
+    background-image: url(/assets/images/bg/bg_group_add.png);
     background-repeat: no-repeat;
     background-position: 50% 50%;
     width: 100%;
@@ -20,7 +20,7 @@
     justify-content: center;
     .mat-form-field {
       width: 70%;
-      height:60px;
+      height: 60px;
     }
   }
 }
diff --git a/src/app/ucap/group/components/name-input.component.ts b/src/app/ucap/group/components/name-input.component.ts
index 47bb695..eacbed9 100644
--- a/src/app/ucap/group/components/name-input.component.ts
+++ b/src/app/ucap/group/components/name-input.component.ts
@@ -1,3 +1,6 @@
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
 import {
   Component,
   OnInit,
@@ -8,11 +11,6 @@ import {
   Output,
   EventEmitter
 } from '@angular/core';
-
-import { Store, select } from '@ngrx/store';
-
-import { LogService } from '@ucap/ng-logger';
-import { Subject } from 'rxjs';
 import {
   FormBuilder,
   FormGroup,
@@ -20,11 +18,17 @@ import {
   ValidatorFn,
   AbstractControl
 } from '@angular/forms';
+
+import { Store, select } from '@ngrx/store';
+
+import { GroupInfoDetail } from '@ucap/domain-group';
+
+import { LogService } from '@ucap/ng-logger';
 import { I18nService } from '@ucap/ng-i18n';
-import { GroupDetailData } from '@ucap/protocol-sync';
+
 import { StringUtil } from '@ucap/ng-core';
-import { takeUntil } from 'rxjs/operators';
 import { GroupSelector } from '@ucap/ng-store-group';
+
 import { AppService } from '@app/services/app.service';
 
 @Component({
@@ -52,7 +56,7 @@ export class NameInputComponent implements OnInit, OnDestroy {
   ) {}
 
   inputForm: FormGroup;
-  groupList: GroupDetailData[];
+  groupList: GroupInfoDetail[];
 
   ngOnInit(): void {
     this.store
diff --git a/src/app/ucap/group/components/profile-image-01.component.html b/src/app/ucap/group/components/profile-image-01.component.html
index 8020a40..f4b6662 100644
--- a/src/app/ucap/group/components/profile-image-01.component.html
+++ b/src/app/ucap/group/components/profile-image-01.component.html
@@ -4,6 +4,7 @@
     [profileImageRoot]="versionInfo?.profileRoot"
     [presenceInfo]="presenceInfo"
     defaultProfileImage="assets/images/ico/img_nophoto.svg"
+    (openProfile)="onOpenProfile($event)"
   >
   </ucap-organization-profile-image-01>
 </div>
diff --git a/src/app/ucap/group/components/profile-image-01.component.ts b/src/app/ucap/group/components/profile-image-01.component.ts
index 015b09c..c307d10 100644
--- a/src/app/ucap/group/components/profile-image-01.component.ts
+++ b/src/app/ucap/group/components/profile-image-01.component.ts
@@ -7,17 +7,19 @@ import {
   OnDestroy,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
-  Input
+  Input,
+  EventEmitter,
+  Output
 } from '@angular/core';
 
 import { Store, select } from '@ngrx/store';
 
-import { VersionInfo2Response } from '@ucap/api-public';
-import { UserInfoSS } from '@ucap/protocol-query';
+import { UserInfoSS } from '@ucap/domain-organization';
+import { StatusBulkInfo } from '@ucap/domain-status';
 
 import { LogService } from '@ucap/ng-logger';
 import { PresenceSelector } from '@ucap/ng-store-organization';
-import { StatusBulkInfo } from '@ucap/protocol-status';
+import { VersionInfo } from '@ucap/domain-authentication';
 
 @Component({
   selector: 'app-group-profile-image-01',
@@ -37,9 +39,20 @@ export class ProfileImage01Component implements OnInit, OnDestroy {
   _userInfo: UserInfoSS;
 
   @Input()
-  versionInfo: VersionInfo2Response;
+  versionInfo: VersionInfo;
 
-  presenceInfo: StatusBulkInfo;
+  set presenceInfo(p: StatusBulkInfo) {
+    this._presenceInfo = p;
+    this.changeDetectorRef.markForCheck();
+  }
+  get presenceInfo() {
+    return this._presenceInfo;
+  }
+  // tslint:disable-next-line: variable-name
+  _presenceInfo: StatusBulkInfo;
+
+  @Output()
+  openProfile: EventEmitter<UserInfoSS> = new EventEmitter();
 
   private ngOnDestroySubject: Subject<void> = new Subject();
 
@@ -59,7 +72,7 @@ export class ProfileImage01Component implements OnInit, OnDestroy {
         )
       )
       .subscribe((status) => {
-        this.presenceInfo = status as any;
+        this.presenceInfo = status;
       });
   }
 
@@ -69,4 +82,8 @@ export class ProfileImage01Component implements OnInit, OnDestroy {
       this.ngOnDestroySubject.complete();
     }
   }
+
+  onOpenProfile(userInfo: UserInfoSS) {
+    this.openProfile.emit(userInfo);
+  }
 }
diff --git a/src/app/ucap/group/components/profile-list-01.component.html b/src/app/ucap/group/components/profile-list-01.component.html
index 1dbc048..9981322 100644
--- a/src/app/ucap/group/components/profile-list-01.component.html
+++ b/src/app/ucap/group/components/profile-list-01.component.html
@@ -16,7 +16,7 @@
           <app-group-profile-image-01
             ucapOrganizationProfileListItem01="profileImage"
             [userInfo]="userInfo"
-            [versionInfo]="versionInfo2Res"
+            [versionInfo]="versionInfo"
           ></app-group-profile-image-01>
         </app-group-profile-list-item-02>
       </ng-template>
diff --git a/src/app/ucap/group/components/profile-list-01.component.ts b/src/app/ucap/group/components/profile-list-01.component.ts
index f9b8ce7..e3c5826 100644
--- a/src/app/ucap/group/components/profile-list-01.component.ts
+++ b/src/app/ucap/group/components/profile-list-01.component.ts
@@ -14,11 +14,11 @@ import {
 
 import { Store, select } from '@ngrx/store';
 
-import { VersionInfo2Response } from '@ucap/api-public';
-import { UserInfoF } from '@ucap/protocol-query';
+import { UserInfoF } from '@ucap/domain-organization';
 
 import { LogService } from '@ucap/ng-logger';
 import { ConfigurationSelector } from '@ucap/ng-store-authentication';
+import { VersionInfo } from '@ucap/domain-authentication';
 
 interface CheckedInfo {
   checked: boolean;
@@ -55,7 +55,7 @@ export class ProfileList01Component implements OnInit, OnDestroy {
   @Output()
   toggleCheck: EventEmitter<CheckedInfo[]> = new EventEmitter();
 
-  versionInfo2Res: VersionInfo2Response;
+  versionInfo: VersionInfo;
 
   processing = false;
 
@@ -71,10 +71,10 @@ export class ProfileList01Component implements OnInit, OnDestroy {
     this.store
       .pipe(
         takeUntil(this.ngOnDestroySubject),
-        select(ConfigurationSelector.versionInfo2Response)
+        select(ConfigurationSelector.versionInfo)
       )
-      .subscribe((versionInfo2Res) => {
-        this.versionInfo2Res = versionInfo2Res;
+      .subscribe((versionInfo) => {
+        this.versionInfo = versionInfo;
       });
   }
 
diff --git a/src/app/ucap/group/components/profile-list-item-02.component.html b/src/app/ucap/group/components/profile-list-item-02.component.html
index 24ae6e0..6628bfc 100644
--- a/src/app/ucap/group/components/profile-list-item-02.component.html
+++ b/src/app/ucap/group/components/profile-list-item-02.component.html
@@ -7,19 +7,15 @@
     [userInfo]="userInfo"
     [checkable]="checkable"
     [checked]="checked"
-    (changeCheck)="onChangeCheckUser($event)"
+    (changeCheck)="onToggleCheckUser($event)"
     class="ucap-organization-profile-list-user"
   >
-    <ucap-organization-profile-image-01
+    <app-group-profile-image-01
       ucapOrganizationProfileListItem01="profileImage"
       [userInfo]="userInfo"
-      [profileImageRoot]="versionInfo2Res?.profileRoot"
-      [presenceInfo]="presenceInfo"
+      [versionInfo]="versionInfo"
       (openProfile)="onOpenProfile($event)"
-      defaultProfileImage="assets/images/ico/img_nophoto.svg"
-    >
-    </ucap-organization-profile-image-01>
-
+    ></app-group-profile-image-01>
     <div
       class="intro-content"
       appProfileListItemUserInfo="info"
@@ -31,7 +27,10 @@
           userInfo.intro.trim() !== '')
       "
     >
-      <div [ngClass]="statusMsgClass">
+      <div
+        *ngIf="!!statusMsgClass && statusMsgClass !== ''"
+        [ngClass]="statusMsgClass"
+      >
         <p>{{ _userStatusMessage() }}</p>
       </div>
     </div>
@@ -50,56 +49,14 @@
 </div>
 
 <ng-template #profileMoreContextTemplate>
-  <button
-    mat-icon-button
-    aria-label="chat"
-    [matTooltip]="'common:tooltip.chat' | ucapI18n"
-    (click)="onClickProfileContextMenu($event, 'CHAT')"
-  >
-    <img src="assets/images/ico/btn_lise_chat_a24.svg" alt="" />
-  </button>
-  <button
-    mat-icon-button
-    aria-label="message"
-    [matTooltip]="'common:tooltip.message' | ucapI18n"
-    (click)="
-      $event.stopPropagation(); onClickProfileContextMenu($event, 'MESSAGE')
-    "
-  >
-    <img src="assets/images/ico/btn_list_message_a24.svg" alt="" />
-  </button>
-  <button
-    mat-icon-button
-    aria-label="mobile"
-    [matTooltip]="'common:tooltip.mobile' | ucapI18n"
-    (click)="onClickProfileContextMenu($event, 'MOBILE')"
-  >
-    <img src="assets/images/ico/btn_list_mobile_a24.svg" alt="" />
-  </button>
-  <button
-    mat-icon-button
-    aria-label="call"
-    [matTooltip]="'common:tooltip.office' | ucapI18n"
-    (click)="onClickProfileContextMenu($event, 'OFFICE')"
-  >
-    <img src="assets/images/ico/btn_list_call_a24.svg" alt="" />
-  </button>
-  <button
-    mat-icon-button
-    aria-label="vc"
-    [disabled]="!authRes || (!!authRes && !authRes.canVideoConference)"
-    [matTooltip]="'common:tooltip.videoConference' | ucapI18n"
-    (click)="onClickProfileContextMenu($event, 'VIDEO_CONFERENCE')"
-  >
-    <img src="assets/images/ico/btn_list_vc-a24.svg" alt="" />
-  </button>
-  <button
-    mat-icon-button
-    aria-label="more"
-    *ngIf="isMoreMenu"
-    [matTooltip]="'common:tooltip.more' | ucapI18n"
-    (click)="onClickMore($event)"
-  >
-    <mat-icon>more_horiz</mat-icon>
-  </button>
+  <ucap-organization-profile-menu-02
+    [user]="user"
+    [userInfo]="userInfo"
+    [groupInfo]="group"
+    [menuButtonType]="menuButtonType"
+    [userPermission]="userPermission"
+    [isShowMoreMenu]="isMoreMenu"
+    (clickProfileMenu)="onClickProfileMenu($event)"
+    (clickMoreMenu)="onClickMoreMenu($event)"
+  ></ucap-organization-profile-menu-02>
 </ng-template>
diff --git a/src/app/ucap/group/components/profile-list-item-02.component.ts b/src/app/ucap/group/components/profile-list-item-02.component.ts
index 0257f94..ba60175 100644
--- a/src/app/ucap/group/components/profile-list-item-02.component.ts
+++ b/src/app/ucap/group/components/profile-list-item-02.component.ts
@@ -16,10 +16,8 @@ import {
 
 import { select, Store } from '@ngrx/store';
 
-import { VersionInfo2Response } from '@ucap/api-public';
-import { GroupDetailData } from '@ucap/protocol-sync';
-import { UserInfoF, AuthResponse } from '@ucap/protocol-query';
-import { StatusBulkInfo } from '@ucap/protocol-status';
+import { User, UserInfoF } from '@ucap/domain-organization';
+import { GroupInfoDetail } from '@ucap/domain-group';
 
 import { I18nService } from '@ucap/ng-i18n';
 
@@ -29,7 +27,11 @@ import {
 } from '@ucap/ng-store-authentication';
 import { PresenceSelector, UserSelector } from '@ucap/ng-store-organization';
 
-import { ucapAnimations } from '@ucap/ng-ui';
+import { ucapAnimations } from '@ucap/ng-ui/core';
+import { ProfileMenuType } from '@ucap/ng-ui-organization';
+import { UserInfoTypes } from '@app/types';
+import { VersionInfo } from '@ucap/domain-authentication';
+import { UserPermission } from '@ucap/domain-authorization';
 
 @Component({
   selector: 'app-group-profile-list-item-02',
@@ -39,11 +41,14 @@ import { ucapAnimations } from '@ucap/ng-ui';
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ProfileListItem02Component implements OnInit, OnDestroy {
+  @Input()
+  user: User;
+
   @Input()
   userInfo: UserInfoF;
 
   @Input()
-  group: GroupDetailData;
+  group: GroupInfoDetail;
 
   @Input()
   checkable = false;
@@ -54,22 +59,26 @@ export class ProfileListItem02Component implements OnInit, OnDestroy {
   @Input()
   checked = false;
 
+  @Input()
+  menuButtonType = 1;
+
+  // moreMenu, floatingProfileMenu
   @Output()
-  moreMenu: EventEmitter<{
+  clickMoreMenu: EventEmitter<{
     event: MouseEvent;
-    userInfo: UserInfoF;
-    group: GroupDetailData;
+    userInfo: UserInfoTypes;
+    group: GroupInfoDetail;
     rect: any;
   }> = new EventEmitter();
 
   @Output()
-  floatingProfileMenu: EventEmitter<{
-    menuType: string;
-    userInfo: UserInfoF;
+  clickProfileMenu: EventEmitter<{
+    menuType: ProfileMenuType;
+    userInfo: UserInfoTypes;
   }> = new EventEmitter();
 
   @Output()
-  changeCheckUser: EventEmitter<{
+  toggleCheckUser: EventEmitter<{
     checked: boolean;
     userInfo: UserInfoF;
   }> = new EventEmitter();
@@ -81,19 +90,15 @@ export class ProfileListItem02Component implements OnInit, OnDestroy {
   isShow = false;
   @Input()
   isDialog = false;
-  @Input()
-  isClickMore = false;
+
   @Input()
   isMoreMenu = true;
 
-  versionInfo2Res: VersionInfo2Response;
-  authRes: AuthResponse;
+  versionInfo: VersionInfo;
+  userPermission: UserPermission;
   statusMsgClass: string;
   isShowStatusMsg = false;
 
-  profileImageRoot: string;
-  presenceInfo: StatusBulkInfo;
-
   private ngOnDestroySubject: Subject<void> = new Subject();
 
   constructor(
@@ -107,19 +112,10 @@ export class ProfileListItem02Component implements OnInit, OnDestroy {
     this.store
       .pipe(
         takeUntil(this.ngOnDestroySubject),
-        select(ConfigurationSelector.versionInfo2Response)
+        select(ConfigurationSelector.versionInfo)
       )
-      .subscribe((versionInfo2Res) => {
-        this.versionInfo2Res = versionInfo2Res;
-      });
-
-    this.store
-      .pipe(
-        takeUntil(this.ngOnDestroySubject),
-        select(PresenceSelector.selectStatusBulkInfo, this.userInfo.seq)
-      )
-      .subscribe((status) => {
-        this.presenceInfo = status;
+      .subscribe((versionInfo) => {
+        this.versionInfo = versionInfo;
       });
 
     this.store
@@ -137,10 +133,10 @@ export class ProfileListItem02Component implements OnInit, OnDestroy {
     this.store
       .pipe(
         takeUntil(this.ngOnDestroySubject),
-        select(AuthorizationSelector.authResponse)
+        select(AuthorizationSelector.userPermission)
       )
-      .subscribe((authRes) => {
-        this.authRes = authRes;
+      .subscribe((userPermission) => {
+        this.userPermission = userPermission;
       });
 
     this._userStatusMessage();
@@ -157,8 +153,8 @@ export class ProfileListItem02Component implements OnInit, OnDestroy {
     this.openProfile.emit(userInfo);
   }
 
-  onChangeCheckUser(param: { checked: boolean; userInfo: UserInfoF }) {
-    this.changeCheckUser.emit(param);
+  onToggleCheckUser(param: { checked: boolean; userInfo: UserInfoF }) {
+    this.toggleCheckUser.emit(param);
     this.changeDetectorRef.detectChanges();
   }
 
@@ -178,25 +174,22 @@ export class ProfileListItem02Component implements OnInit, OnDestroy {
     event.stopPropagation();
   }
 
-  onClickProfileContextMenu(event: MouseEvent, menuType: string) {
-    this.floatingProfileMenu.emit({ menuType, userInfo: this.userInfo });
-
-    event.stopPropagation();
+  onClickProfileMenu(params: {
+    menuType: ProfileMenuType;
+    userInfo: UserInfoTypes;
+  }) {
+    this.clickProfileMenu.emit(params);
   }
 
-  onClickMore(event: MouseEvent) {
-    this.isClickMore = true;
-
+  onClickMoreMenu(params: {
+    event: MouseEvent;
+    userInfo: UserInfoTypes;
+    group: GroupInfoDetail;
+    rect: any;
+  }) {
     const rect = this.elementRef.nativeElement.getBoundingClientRect();
-
-    this.moreMenu.emit({
-      event,
-      userInfo: this.userInfo,
-      group: this.group,
-      rect
-    });
-
-    event.stopPropagation();
+    params = { ...params, rect };
+    this.clickMoreMenu.emit(params);
   }
 
   _userStatusMessage(): string {
diff --git a/src/app/ucap/group/components/profile-list-item-03.component.html b/src/app/ucap/group/components/profile-list-item-03.component.html
index cd47827..06a0e9e 100644
--- a/src/app/ucap/group/components/profile-list-item-03.component.html
+++ b/src/app/ucap/group/components/profile-list-item-03.component.html
@@ -13,9 +13,10 @@
     <ucap-organization-profile-image-01
       ucapOrganizationProfileListItem01="profileImage"
       [userInfo]="userInfo"
-      [profileImageRoot]="versionInfo2Res?.profileRoot"
+      [profileImageRoot]="versionInfo?.profileRoot"
       [presenceInfo]="presenceInfo"
       defaultProfileImage="assets/images/ico/img_nophoto.svg"
+      (openProfile)="onClickOpenProfile()"
     >
     </ucap-organization-profile-image-01>
     <div
@@ -32,41 +33,14 @@
 </div>
 
 <ng-template #profileMoreContextTemplate>
-  <button
-    mat-icon-button
-    aria-label="Profile"
-    [matTooltip]="'common:tooltip.profile' | ucapI18n"
-    (click)="onClickProfileContextMenu($event, 'PROFILE')"
+  <ucap-organization-profile-menu-02
+    [user]="user"
+    [userInfo]="userInfo"
+    [isMe]="isMe"
+    [isShowForce]="isShowForce"
+    [menuButtonType]="2"
+    [isShowMoreMenu]="false"
+    (clickProfileMenu)="onClickProfileMenu($event)"
   >
-    <img src="assets/images/ico/btn_list_profile_set_a24.svg" alt="" />
-  </button>
-  <button
-    mat-icon-button
-    aria-label="chat"
-    [matTooltip]="'common:tooltip.chat' | ucapI18n"
-    (click)="onClickProfileContextMenu($event, 'CHAT')"
-  >
-    <img src="assets/images/ico/btn_lise_chat_a24.svg" alt="" />
-  </button>
-  <button
-    mat-icon-button
-    aria-label="message"
-    [disabled]="!!isMe"
-    [matTooltip]="'common:tooltip.message' | ucapI18n"
-    (click)="
-      $event.stopPropagation(); onClickProfileContextMenu($event, 'MESSAGE')
-    "
-  >
-    <img src="assets/images/ico/btn_list_message_a24.svg" alt="" />
-  </button>
-  <div class="divider"></div>
-  <button
-    mat-icon-button
-    aria-label="vc"
-    [disabled]="!!isMe"
-    [matTooltip]="'common:tooltip.exitForcing' | ucapI18n"
-    (click)="onClickProfileContextMenu($event, 'EXIT')"
-  >
-    <img src="assets/images/ico/btn_list_exit_a24.svg" alt="" />
-  </button>
+  </ucap-organization-profile-menu-02>
 </ng-template>
diff --git a/src/app/ucap/group/components/profile-list-item-03.component.scss b/src/app/ucap/group/components/profile-list-item-03.component.scss
index 7645a66..112510a 100644
--- a/src/app/ucap/group/components/profile-list-item-03.component.scss
+++ b/src/app/ucap/group/components/profile-list-item-03.component.scss
@@ -32,11 +32,3 @@
     color: #fd578a;
   }
 }
-
-.divider {
-  margin: 0 4px 0 5px;
-  width: 1px;
-  height: 15px;
-  display: inline-block;
-  background-color: #ccc;
-}
diff --git a/src/app/ucap/group/components/profile-list-item-03.component.ts b/src/app/ucap/group/components/profile-list-item-03.component.ts
index 797cc8f..ec1cc1a 100644
--- a/src/app/ucap/group/components/profile-list-item-03.component.ts
+++ b/src/app/ucap/group/components/profile-list-item-03.component.ts
@@ -14,20 +14,20 @@ import {
 
 import { select, Store } from '@ngrx/store';
 
-import { VersionInfo2Response } from '@ucap/api-public';
-import { GroupDetailData } from '@ucap/protocol-sync';
-import { UserInfoSS } from '@ucap/protocol-query';
+import { User, UserInfoSS } from '@ucap/domain-organization';
+import { StatusBulkInfo } from '@ucap/domain-status';
+import { GroupInfoDetail } from '@ucap/domain-group';
 import {
   UserInfo as RoomUserInfo,
   UserInfoShort as RoomUserInfoShort
-} from '@ucap/protocol-room';
-import { StatusBulkInfo } from '@ucap/protocol-status';
-import { User } from '@ucap/protocol-info';
+} from '@ucap/domain-chat';
 
 import { ConfigurationSelector } from '@ucap/ng-store-authentication';
 import { PresenceSelector, UserSelector } from '@ucap/ng-store-organization';
 
-import { ucapAnimations } from '@ucap/ng-ui';
+import { ucapAnimations } from '@ucap/ng-ui/core';
+import { ProfileMenuType } from '@ucap/ng-ui-organization';
+import { VersionInfo } from '@ucap/domain-authentication';
 
 export type UserInfoTypes = RoomUserInfo | RoomUserInfoShort;
 
@@ -46,13 +46,15 @@ export class ProfileListItem03Component implements OnInit, OnDestroy {
   userInfo: UserInfoTypes;
 
   @Input()
-  group: GroupDetailData;
+  group: GroupInfoDetail;
 
   @Input()
   checkable = false;
 
   @Input()
   isMe = false;
+  @Input()
+  isShowForce = true;
 
   @Input()
   checked = false;
@@ -76,7 +78,7 @@ export class ProfileListItem03Component implements OnInit, OnDestroy {
   exitForcing = new EventEmitter<UserInfoTypes>();
 
   user: User;
-  versionInfo2Res: VersionInfo2Response;
+  versionInfo: VersionInfo;
 
   presenceInfo: StatusBulkInfo;
 
@@ -93,10 +95,10 @@ export class ProfileListItem03Component implements OnInit, OnDestroy {
     this.store
       .pipe(
         takeUntil(this.ngOnDestroySubject),
-        select(ConfigurationSelector.versionInfo2Response)
+        select(ConfigurationSelector.versionInfo)
       )
-      .subscribe((versionInfo2Res) => {
-        this.versionInfo2Res = versionInfo2Res;
+      .subscribe((versionInfo) => {
+        this.versionInfo = versionInfo;
       });
 
     this.store
@@ -142,6 +144,37 @@ export class ProfileListItem03Component implements OnInit, OnDestroy {
     event.stopPropagation();
   }
 
+  onClickOpenProfile() {
+    this.openProfile.emit(String(this.userInfo.seq));
+  }
+
+  onClickProfileMenu(params: {
+    menuType: ProfileMenuType;
+    userInfo: UserInfoTypes;
+  }) {
+    switch (params.menuType) {
+      case ProfileMenuType.profile:
+        {
+          this.openProfile.emit(String(this.userInfo.seq));
+        }
+        break;
+      case ProfileMenuType.chat:
+        {
+          this.openChatRoom.emit(String(this.userInfo.seq));
+        }
+        break;
+      case ProfileMenuType.message:
+        {
+          this.sendMessage.emit(String(this.userInfo.seq));
+        }
+        break;
+      case ProfileMenuType.exitForcing:
+        {
+          this.exitForcing.emit(this.userInfo);
+        }
+        break;
+    }
+  }
   onClickProfileContextMenu(event: MouseEvent, type: string) {
     event.preventDefault();
     event.stopPropagation();
diff --git a/src/app/ucap/group/components/profile-list-item-04.component.html b/src/app/ucap/group/components/profile-list-item-04.component.html
new file mode 100644
index 0000000..b7d61c6
--- /dev/null
+++ b/src/app/ucap/group/components/profile-list-item-04.component.html
@@ -0,0 +1,56 @@
+<div
+  class="profile-list-container"
+  (mouseover)="onMouseover($event)"
+  (mouseleave)="onMouseleave($event)"
+>
+  <ucap-organization-profile-list-item-02
+    [userInfo]="userInfo"
+    [checkable]="checkable"
+    [checked]="checked"
+    (changeCheck)="onToggleCheckUser($event)"
+    class="ucap-organization-profile-list-user"
+  >
+    <app-group-profile-image-01
+      ucapOrganizationProfileListItem01="profileImage"
+      [userInfo]="userInfo"
+      [versionInfo]="versionInfo"
+    ></app-group-profile-image-01>
+    <div
+      class="intro-content"
+      appProfileListItemUserInfo="info"
+      *ngIf="
+        !isShowFAB &&
+        !!userInfo &&
+        ((!!userInfo.nickName && userInfo.nickName.trim() !== '') ||
+          userInfo.intro.trim() !== '')
+      "
+    >
+      <div
+        *ngIf="!!statusMsgClass && statusMsgClass !== ''"
+        [ngClass]="statusMsgClass"
+      >
+        <p>{{ _userStatusMessage() }}</p>
+      </div>
+    </div>
+
+    <div
+      class="action-content"
+      appProfileListItemUserAction="action"
+      [ngClass]="!!isShowFAB && !!useFAB ? 'visible-profile-menu' : ''"
+    >
+      <ng-template
+        [ngTemplateOutlet]="profileMoreContextTemplate"
+      ></ng-template>
+    </div>
+  </ucap-organization-profile-list-item-02>
+</div>
+
+<ng-template #profileMoreContextTemplate>
+  <ucap-organization-profile-menu-02
+    [user]="user"
+    [userInfo]="userInfo"
+    [menuButtonType]="menuButtonType"
+    [isShowMoreMenu]="false"
+  >
+  </ucap-organization-profile-menu-02>
+</ng-template>
diff --git a/src/app/ucap/group/components/profile-list-item-04.component.scss b/src/app/ucap/group/components/profile-list-item-04.component.scss
new file mode 100644
index 0000000..4eab67b
--- /dev/null
+++ b/src/app/ucap/group/components/profile-list-item-04.component.scss
@@ -0,0 +1,19 @@
+@import '~@ucap/ng-ui-material/material';
+
+/// var
+/// --ucap-organization-profile-list-item-01-size: 70px
+.profile-list-container {
+  width: 100%;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  padding: 0 16px;
+  align-items: center;
+  position: relative;
+  border-bottom: 1px solid #eee;
+  min-height: 60px;
+  cursor: pointer;
+}
+.ucap-organization-profile-list-user {
+  width: 100%;
+}
diff --git a/src/app/ucap/group/components/profile-list-item-04.component.spec.ts b/src/app/ucap/group/components/profile-list-item-04.component.spec.ts
new file mode 100644
index 0000000..20df6df
--- /dev/null
+++ b/src/app/ucap/group/components/profile-list-item-04.component.spec.ts
@@ -0,0 +1,26 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { ProfileListItem04Component } from './profile-list-item-04.component';
+
+describe('ucap::ucap::organization::ProfileListItem04Component', () => {
+  let component: ProfileListItem04Component;
+  let fixture: ComponentFixture<ProfileListItem04Component>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ProfileListItem04Component]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProfileListItem04Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/ucap/group/components/profile-list-item-04.component.ts b/src/app/ucap/group/components/profile-list-item-04.component.ts
new file mode 100644
index 0000000..7109bf5
--- /dev/null
+++ b/src/app/ucap/group/components/profile-list-item-04.component.ts
@@ -0,0 +1,151 @@
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+import {
+  Component,
+  OnInit,
+  OnDestroy,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Input,
+  EventEmitter,
+  Output,
+  ElementRef,
+  Self
+} from '@angular/core';
+
+import { select, Store } from '@ngrx/store';
+
+import { User, UserInfoF } from '@ucap/domain-organization';
+
+import { I18nService } from '@ucap/ng-i18n';
+
+import {
+  ConfigurationSelector,
+  AuthorizationSelector
+} from '@ucap/ng-store-authentication';
+
+import { ucapAnimations } from '@ucap/ng-ui/core';
+import { UserSelector } from '@ucap/ng-store-organization';
+import { VersionInfo } from '@ucap/domain-authentication';
+
+@Component({
+  selector: 'app-group-profile-list-item-04',
+  templateUrl: './profile-list-item-04.component.html',
+  styleUrls: ['./profile-list-item-04.component.scss'],
+  animations: ucapAnimations,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ProfileListItem04Component implements OnInit, OnDestroy {
+  @Input()
+  userInfo: UserInfoF;
+
+  @Input()
+  checkable = false;
+
+  @Input()
+  checked = false;
+
+  @Input()
+  useFAB = false;
+  @Input()
+  menuButtonType = 0;
+
+  @Output()
+  changeCheck: EventEmitter<{
+    checked: boolean;
+    userInfo: UserInfoF;
+  }> = new EventEmitter();
+
+  isShowFAB = false;
+  versionInfo: VersionInfo;
+  // userPermission: UserPermission;
+  user: User;
+  statusMsgClass: string;
+
+  private ngOnDestroySubject: Subject<void> = new Subject();
+
+  constructor(
+    private changeDetectorRef: ChangeDetectorRef,
+    private i18nService: I18nService,
+    @Self() private elementRef: ElementRef,
+    private store: Store<any>
+  ) {}
+
+  ngOnInit(): void {
+    this.store
+      .pipe(
+        takeUntil(this.ngOnDestroySubject),
+        select(ConfigurationSelector.versionInfo)
+      )
+      .subscribe((versionInfo) => {
+        this.versionInfo = versionInfo;
+      });
+
+    // this.store
+    //   .pipe(
+    //     takeUntil(this.ngOnDestroySubject),
+    //     select(AuthorizationSelector.userPermission)
+    //   )
+    //   .subscribe((userPermission) => {
+    //     this.userPermission = userPermission;
+    //   });
+
+    this.store
+      .pipe(takeUntil(this.ngOnDestroySubject), select(UserSelector.user))
+      .subscribe((user) => {
+        this.user = user;
+      });
+
+    this._userStatusMessage();
+  }
+
+  ngOnDestroy(): void {
+    if (!!this.ngOnDestroySubject) {
+      this.ngOnDestroySubject.next();
+      this.ngOnDestroySubject.complete();
+    }
+  }
+
+  onToggleCheckUser(param: { checked: boolean; userInfo: UserInfoF }) {
+    this.changeCheck.emit(param);
+    this.changeDetectorRef.detectChanges();
+  }
+
+  onMouseover(event: MouseEvent): void {
+    if (!!this.useFAB) {
+      this.isShowFAB = true;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+  }
+  onMouseleave(event: MouseEvent): void {
+    if (!!this.useFAB) {
+      this.isShowFAB = false;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+  }
+
+  _userStatusMessage(): string {
+    if (
+      !!this.userInfo &&
+      !!this.userInfo.nickName &&
+      this.userInfo.nickName.trim() !== ''
+    ) {
+      this.statusMsgClass = 'intro-name';
+      return this.userInfo.nickName;
+    } else if (
+      !!this.userInfo &&
+      !!this.userInfo.intro &&
+      this.userInfo.intro.trim() !== ''
+    ) {
+      this.statusMsgClass = 'intro';
+      return this.userInfo.intro;
+    } else {
+      this.statusMsgClass = null;
+      return '';
+    }
+  }
+}
diff --git a/src/app/ucap/group/components/profile-list.component.html b/src/app/ucap/group/components/profile-list.component.html
index 00c0080..c7aa507 100644
--- a/src/app/ucap/group/components/profile-list.component.html
+++ b/src/app/ucap/group/components/profile-list.component.html
@@ -3,23 +3,29 @@
     <mat-progress-bar mode="query" *ngIf="processing"></mat-progress-bar>
   </div>
   <ng-container *ngIf="!!userInfos && userInfos.length > 0; else empty">
-    <ucap-organization-profile-list [userInfos]="userInfos">
+    <ucap-organization-profile-list
+      #ucapProfileList
+      [userInfos]="userInfos"
+      [cacheSize]="0"
+    >
       <ng-template ucapOrganizationProfileListNode let-userInfo>
         <app-group-profile-list-item-02
+          [user]="user"
           [userInfo]="userInfo"
           [checkable]="getCheckable(userInfo)"
           [isDialog]="isDialog"
           [isMoreMenu]="isMoreMenu"
           [checked]="getCheckedUser(userInfo)"
           (click)="onClickUser(userInfo)"
-          (floatingProfileMenu)="onFloatingProfileMenu($event)"
-          (changeCheckUser)="onChangeCheckUser($event)"
+          (openProfile)="onOpenProfile(userInfo)"
+          (clickProfileMenu)="onClickProfileMenu($event)"
+          (toggleCheckUser)="onToggleCheckUser($event)"
         >
-          <app-group-profile-image-01
+          <!-- <app-group-profile-image-01
             ucapOrganizationProfileListItem01="profileImage"
             [userInfo]="userInfo"
-            [versionInfo]="versionInfo2Res"
-          ></app-group-profile-image-01>
+            [versionInfo]="versionInfo"
+          ></app-group-profile-image-01> -->
         </app-group-profile-list-item-02>
       </ng-template>
     </ucap-organization-profile-list>
diff --git a/src/app/ucap/group/components/profile-list.component.ts b/src/app/ucap/group/components/profile-list.component.ts
index c116016..36870ce 100644
--- a/src/app/ucap/group/components/profile-list.component.ts
+++ b/src/app/ucap/group/components/profile-list.component.ts
@@ -5,27 +5,28 @@ import {
   Component,
   OnInit,
   OnDestroy,
+  AfterViewInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Input,
   Output,
-  EventEmitter
+  EventEmitter,
+  ViewChild
 } from '@angular/core';
 
 import { Store, select } from '@ngrx/store';
 
-import { VersionInfo2Response } from '@ucap/api-public';
-
 import {
+  User,
+  UserInfo,
   UserInfoSS,
   UserInfoF,
   UserInfoDN,
-  DeptSearchType,
-  DeptUserRequest
-} from '@ucap/protocol-query';
-import { UserInfo as RoomUserInfo } from '@ucap/protocol-room';
-import { UserInfo } from '@ucap/protocol-sync';
-import { User } from '@ucap/protocol-info';
+  DeptSearchType
+} from '@ucap/domain-organization';
+import { UserInfo as RoomUserInfo } from '@ucap/domain-chat';
+
+import { DeptUserRequest } from '@ucap/protocol-query';
 
 import { LogService } from '@ucap/ng-logger';
 import { QueryProtocolService } from '@ucap/ng-protocol-query';
@@ -36,6 +37,11 @@ import {
 import { PresenceActions, UserSelector } from '@ucap/ng-store-organization';
 
 import { SearchData } from '@app/ucap/organization/models/search-data';
+import {
+  ProfileListComponent as UcapProfileListComponent,
+  ProfileMenuType
+} from '@ucap/ng-ui-organization';
+import { VersionInfo } from '@ucap/domain-authentication';
 
 const DEPT_ORDER_PROPERTY = 'order';
 
@@ -88,19 +94,24 @@ export class ProfileListComponent implements OnInit, OnDestroy {
 
   @Output()
   clicked: EventEmitter<{ userInfo: UserInfoSS }> = new EventEmitter();
-
   @Output()
-  floatingProfileMenu = new EventEmitter<{
+  openProfile: EventEmitter<UserInfoSS> = new EventEmitter();
+  @Output()
+  clickProfileMenu = new EventEmitter<{
     menuType: string;
     userInfo: UserInfoF;
   }>();
 
   @Output()
-  toggleCheck: EventEmitter<CheckedInfo[]> = new EventEmitter();
+  toggleCheckUser: EventEmitter<CheckedInfo[]> = new EventEmitter();
+
+  @ViewChild('ucapProfileList', { static: false })
+  ucapProfileList: UcapProfileListComponent;
 
   set userInfos(userInfos: UserInfoSS[]) {
     this._userInfos = userInfos;
     this.searched.emit(userInfos);
+    this.psUpdate();
   }
   get userInfos() {
     return this._userInfos;
@@ -109,7 +120,7 @@ export class ProfileListComponent implements OnInit, OnDestroy {
   _userInfos: UserInfoSS[] = [];
 
   user: User;
-  versionInfo2Res: VersionInfo2Response;
+  versionInfo: VersionInfo;
 
   processing = false;
 
@@ -126,10 +137,10 @@ export class ProfileListComponent implements OnInit, OnDestroy {
     this.store
       .pipe(
         takeUntil(this.ngOnDestroySubject),
-        select(ConfigurationSelector.versionInfo2Response)
+        select(ConfigurationSelector.versionInfo)
       )
-      .subscribe((versionInfo2Res) => {
-        this.versionInfo2Res = versionInfo2Res;
+      .subscribe((versionInfo) => {
+        this.versionInfo = versionInfo;
       });
 
     this.store
@@ -150,6 +161,12 @@ export class ProfileListComponent implements OnInit, OnDestroy {
     }
   }
 
+  psUpdate() {
+    if (!!this.ucapProfileList) {
+      this.ucapProfileList.psUpdate();
+    }
+  }
+
   /** 전체 체크여부 */
   checkAll() {
     if (!this.userInfos || 0 === this.userInfos.length) {
@@ -163,7 +180,7 @@ export class ProfileListComponent implements OnInit, OnDestroy {
         userInfo: u
       });
     });
-    this.toggleCheck.emit(checked);
+    this.toggleCheckUser.emit(checked);
   }
 
   uncheckAll() {
@@ -178,7 +195,7 @@ export class ProfileListComponent implements OnInit, OnDestroy {
         userInfo: u
       });
     });
-    this.toggleCheck.emit(unchecked);
+    this.toggleCheckUser.emit(unchecked);
   }
 
   getCheckable(userInfo: UserInfoSS): boolean {
@@ -204,19 +221,26 @@ export class ProfileListComponent implements OnInit, OnDestroy {
   }
 
   /** 개별선택(토글) 이벤트 */
-  onChangeCheckUser(param: { checked: boolean; userInfo: UserInfoSS }) {
-    this.toggleCheck.emit([param]);
+  onToggleCheckUser(param: { checked: boolean; userInfo: UserInfoSS }) {
+    this.toggleCheckUser.emit([param]);
     this.changeDetectorRef.detectChanges();
   }
 
-  onFloatingProfileMenu(params: { menuType: string; userInfo: UserInfoF }) {
-    this.floatingProfileMenu.emit(params);
+  onClickProfileMenu(params: {
+    menuType: ProfileMenuType;
+    userInfo: UserInfoF;
+  }) {
+    this.clickProfileMenu.emit(params);
   }
 
   onClickUser(userInfo: UserInfoSS): void {
     this.clicked.emit({ userInfo });
   }
 
+  onOpenProfile(userInfo: UserInfoSS): void {
+    this.openProfile.emit(userInfo);
+  }
+
   private searchMember(searchData: SearchData) {
     if (!searchData) {
       return;
diff --git a/src/app/ucap/group/group.module.ts b/src/app/ucap/group/group.module.ts
index de55341..48460fb 100644
--- a/src/app/ucap/group/group.module.ts
+++ b/src/app/ucap/group/group.module.ts
@@ -15,7 +15,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 
 import { I18nModule, UCAP_I18N_NAMESPACE } from '@ucap/ng-i18n';
-import { UiModule } from '@ucap/ng-ui';
+// import { UiModule } from '@ucap/ng-ui';
 import { GroupUiModule } from '@ucap/ng-ui-group';
 import { OrganizationUiModule } from '@ucap/ng-ui-organization';
 
@@ -39,7 +39,7 @@ import { COMPONENTS } from './components';
     MatProgressBarModule,
 
     I18nModule,
-    UiModule,
+
     OrganizationUiModule,
     GroupUiModule
   ],
diff --git a/src/app/ucap/organization/components/profile-01.component.html b/src/app/ucap/organization/components/profile-01.component.html
index 434c41b..170e2d6 100644
--- a/src/app/ucap/organization/components/profile-01.component.html
+++ b/src/app/ucap/organization/components/profile-01.component.html
@@ -1,15 +1,16 @@
 <div fxFlexFill class="profile-container">
   <ucap-organization-profile-01
     [isMe]="!!userInfo && !!user && userInfo.seq === String(user?.info?.seq)"
-    [authRes]="authRes"
+    [userPermission]="userPermission"
     [userInfo]="userInfo"
-    [profileImageRoot]="versionInfo2Res.profileRoot"
+    [profileImageRoot]="versionInfo.profileRoot"
     [companyName]="companyName"
     defaultProfileImage="assets/images/ico/img_nophoto.svg"
-    [presenceInfo]="getPresenceInfo()"
+    [presenceInfo]="presenceInfo"
     [nickName]="currentNickname"
     [isBuddy]="isBuddy"
     [isFavorite]="isFavorite"
+    [myMadn]="user?.madn"
     [canVideoConfernece]=""
     [canBuddyToggleButton]="true"
     (toggleFavorite)="onToggleFavorite($event)"
diff --git a/src/app/ucap/organization/components/profile-01.component.scss b/src/app/ucap/organization/components/profile-01.component.scss
index 817dda0..4f065b8 100644
--- a/src/app/ucap/organization/components/profile-01.component.scss
+++ b/src/app/ucap/organization/components/profile-01.component.scss
@@ -4,10 +4,10 @@
   width: 100%;
   height: 100%;
   background-image: url(/assets/images/bg/bg_profile1.svg),
-    url(../../../../assets/images/bg/bg_profile2.svg),
-    url(../../../../assets/images/bg/bg_profile3.svg),
-    url(../../../../assets/images/bg/bg_profile4.svg),
-    url(../../../../assets/images/bg/bg_profile5.svg),
+    url(/assets/images/bg/bg_profile2.svg),
+    url(/assets/images/bg/bg_profile3.svg),
+    url(/assets/images/bg/bg_profile4.svg),
+    url(/assets/images/bg/bg_profile5.svg),
     linear-gradient(57deg, #ffe1ba 13%, #f5878c 87%);
   background-repeat: no-repeat;
   background-position: -213px -223px, 433px 95px, 489px 72px, 433px 517px,
diff --git a/src/app/ucap/organization/components/profile-01.component.ts b/src/app/ucap/organization/components/profile-01.component.ts
index 4e42aa7..4db6326 100644
--- a/src/app/ucap/organization/components/profile-01.component.ts
+++ b/src/app/ucap/organization/components/profile-01.component.ts
@@ -1,4 +1,4 @@
-import { Subject } from 'rxjs';
+import { Subject, combineLatest } from 'rxjs';
 import { takeUntil, take, map, withLatestFrom, tap } from 'rxjs/operators';
 
 import {
@@ -15,35 +15,38 @@ import {
 } from '@angular/core';
 
 import { Store, select } from '@ngrx/store';
-import { Dictionary } from '@ngrx/entity';
 
-import { PresenceType, StatusCode } from '@ucap/core';
-import { FileUploadItem } from '@ucap/api';
-import { VersionInfo2Response } from '@ucap/api-public';
-import { AuthResponse, UserInfoSS } from '@ucap/protocol-query';
-import { StatusBulkInfo } from '@ucap/protocol-status';
-import { User } from '@ucap/protocol-info';
+import { FileUploadItem } from '@ucap/domain-common';
+import {
+  User,
+  UserInfoSS,
+  Company,
+  UserInfoF
+} from '@ucap/domain-organization';
+import { PresenceType, StatusCode, StatusBulkInfo } from '@ucap/domain-status';
 
 import { LogService } from '@ucap/ng-logger';
 import { I18nService } from '@ucap/ng-i18n';
 import { QueryProtocolService } from '@ucap/ng-protocol-query';
 import {
-  LoginSelector,
   AuthorizationSelector,
   ConfigurationSelector
 } from '@ucap/ng-store-authentication';
 import {
   PresenceSelector,
   UserSelector,
-  CompanySelector
+  CompanySelector,
+  PresenceActions
 } from '@ucap/ng-store-organization';
-import { BuddySelector } from '@ucap/ng-store-group';
+import { BuddySelector, GroupSelector } from '@ucap/ng-store-group';
 
 import { PresenceUtil } from '@ucap/ng-ui-organization';
+import { GroupInfoDetail } from '@ucap/domain-group';
 
-import { AppChatService } from '@app/services/app-chat.service';
 import { UserInfoTypes } from '@app/types';
-import { Company } from '@ucap/api-external';
+
+import { VersionInfo } from '@ucap/domain-authentication';
+import { UserPermission } from '@ucap/domain-authorization';
 @Component({
   selector: 'app-organization-profile-01',
   templateUrl: './profile-01.component.html',
@@ -61,6 +64,19 @@ export class Profile01Component implements OnInit, OnDestroy {
   }
   _userSeq: string;
 
+  set presenceInfo(p: StatusBulkInfo) {
+    this._presenceInfo = p;
+    this.changeDetectorRef.markForCheck();
+  }
+  get presenceInfo() {
+    return this._presenceInfo;
+  }
+  // tslint:disable-next-line: variable-name
+  _presenceInfo: StatusBulkInfo;
+
+  @Input()
+  companyList: Company[];
+
   @Output()
   openChat: EventEmitter<UserInfoSS> = new EventEmitter();
   @Output()
@@ -100,9 +116,8 @@ export class Profile01Component implements OnInit, OnDestroy {
   userInfo: UserInfoSS;
 
   user: User;
-  authRes: AuthResponse;
-  versionInfo2Res: VersionInfo2Response;
-  presences: Dictionary<StatusBulkInfo>;
+  userPermission: UserPermission;
+  versionInfo: VersionInfo;
 
   String = String;
   PresenceUtil = PresenceUtil;
@@ -111,7 +126,6 @@ export class Profile01Component implements OnInit, OnDestroy {
 
   constructor(
     private queryProtocolService: QueryProtocolService,
-    private appChatService: AppChatService,
     private store: Store<any>,
     private changeDetectorRef: ChangeDetectorRef,
     private logService: LogService,
@@ -122,17 +136,17 @@ export class Profile01Component implements OnInit, OnDestroy {
   isBuddy = false;
   isFavorite = false;
   currentNickname: string;
-  companyList: Company[];
+
   companyName: string;
 
   ngOnInit(): void {
     this.store
       .pipe(
         takeUntil(this.ngOnDestroySubject),
-        select(ConfigurationSelector.versionInfo2Response)
+        select(ConfigurationSelector.versionInfo)
       )
-      .subscribe((versionInfo2Res) => {
-        this.versionInfo2Res = versionInfo2Res;
+      .subscribe((versionInfo) => {
+        this.versionInfo = versionInfo;
       });
 
     this.store
@@ -145,38 +159,35 @@ export class Profile01Component implements OnInit, OnDestroy {
     this.store
       .pipe(
         takeUntil(this.ngOnDestroySubject),
-        select(AuthorizationSelector.authResponse)
+        select(AuthorizationSelector.userPermission)
       )
-      .subscribe((authRes) => {
-        this.authRes = authRes;
+      .subscribe((userPermission) => {
+        this.userPermission = userPermission;
       });
 
     this.store
       .pipe(
         takeUntil(this.ngOnDestroySubject),
-        select(PresenceSelector.selectEntitiesStatusBulkInfo)
+        select(PresenceSelector.selectStatusBulkInfo, Number(this.userSeq))
       )
       .subscribe((statusBulkInfo) => {
-        this.presences = statusBulkInfo;
+        this.presenceInfo = statusBulkInfo;
       });
 
-    this.store
-      .pipe(takeUntil(this.ngOnDestroySubject), select(BuddySelector.buddies))
-      .subscribe((buddies) => {
-        const users = buddies.filter((buddy) => {
-          if (!!buddy && !!this.userInfo) {
-            return buddy.seq === Number(this.userInfo.seq);
-          }
-        });
-        this.isBuddy = users.length > 0;
-        if (this.isBuddy) {
-          this.isFavorite = users[0].isFavorit;
-          this.currentNickname = users[0].nickName;
-          const profileImageFile = users[0].profileImageFile;
-          const intro = users[0].intro;
-
-          this.userInfo = { ...this.userInfo, profileImageFile, intro };
+    combineLatest([
+      this.store.pipe(select(BuddySelector.buddies)),
+      this.store.pipe(select(GroupSelector.groups))
+    ])
+      .pipe(takeUntil(this.ngOnDestroySubject))
+      .subscribe(([buddies, groups]) => {
+        if (
+          !!buddies &&
+          !!groups &&
+          (buddies.length === 0 || groups.length === 0)
+        ) {
+          return;
         }
+        this.checkBuddy(false, buddies, groups);
         this.changeDetectorRef.markForCheck();
       });
 
@@ -200,14 +211,6 @@ export class Profile01Component implements OnInit, OnDestroy {
     }
   }
 
-  getPresenceInfo(): StatusBulkInfo | undefined {
-    if (!!this.presences) {
-      return this.presences[this._userSeq];
-    } else {
-      return undefined;
-    }
-  }
-
   _refreshProfile() {
     if (!this.user || !this.userSeq) {
       return;
@@ -224,33 +227,45 @@ export class Profile01Component implements OnInit, OnDestroy {
       })
       .pipe(
         take(1),
-        withLatestFrom(this.store.pipe(select(BuddySelector.buddies))),
-        tap(([res, buddies]) => {
-          this.userInfo = res.userInfo;
-          const users = buddies.filter(
-            (buddy) => buddy.seq === Number(this.userInfo.seq)
-          );
-          this.isBuddy = users.length > 0;
-          if (this.isBuddy) {
-            this.isFavorite = users[0].isFavorit;
-            this.currentNickname = users[0].nickName.trim();
+        withLatestFrom(
+          this.store.pipe(select(BuddySelector.buddies)),
+          this.store.pipe(select(GroupSelector.groups)),
+          this.store.pipe(
+            select(PresenceSelector.selectStatusBulkInfo, Number(this.userSeq))
+          )
+        ),
+        tap(([res, buddies, groups, bulkInfo]) => {
+          if (!bulkInfo) {
+            this.store.dispatch(
+              PresenceActions.bulkInfo({
+                divCd: 'orgSrch',
+                userSeqs: [this.userSeq]
+              })
+            );
           }
+          this.userInfo = res.userInfo;
+          this.presenceInfo = bulkInfo;
+
+          this.checkBuddy(true, buddies, groups);
+
           if (
             !this.userInfo.companyName ||
             (!!this.userInfo.companyName &&
               this.userInfo.companyName.trim() === '')
           ) {
-            const company = this.companyList.filter(
-              (companyInfo) =>
-                companyInfo.companyCode === this.userInfo.companyCode
-            );
-            if (!!company) {
-              this.companyName = company[0].companyName;
+            if (!!this.companyList && this.companyList.length > 0) {
+              const company = this.companyList.filter(
+                (companyInfo) =>
+                  companyInfo.companyCode === this.userInfo.companyCode
+              );
+              if (!!company) {
+                this.companyName = company[0].companyName;
+              }
             }
           } else {
             this.companyName = this.userInfo.companyName;
           }
-          this.changeDetectorRef.markForCheck();
+          // this.changeDetectorRef.markForCheck();
         })
       )
       .subscribe();
@@ -289,4 +304,46 @@ export class Profile01Component implements OnInit, OnDestroy {
   onUploadProfileImage(profileImageFileUploadItem: FileUploadItem) {
     this.uploadProfileImage.emit(profileImageFileUploadItem);
   }
+
+  private checkBuddy(
+    isSearch: boolean,
+    buddies: UserInfoF[],
+    groups: GroupInfoDetail[]
+  ) {
+    const users = buddies.filter((buddy) => {
+      if (!!buddy && !!this.userInfo) {
+        return buddy.seq === Number(this.userInfo.seq);
+      }
+    });
+
+    this.isBuddy = users.length > 0;
+    if (this.isBuddy) {
+      const tempUser = users[0];
+
+      let isFind = false;
+      groups.every((g) => {
+        const find = g.userSeqs.indexOf(String(tempUser.seq));
+
+        if (find > -1) {
+          isFind = true;
+          return false;
+        }
+        return true;
+      });
+
+      if (!isFind) {
+        this.isBuddy = isFind;
+        return;
+      }
+
+      this.isFavorite = tempUser.isFavorit;
+      this.currentNickname = tempUser.nickName;
+      if (!isSearch) {
+        const profileImageFile = tempUser.profileImageFile;
+        const intro = tempUser.intro;
+
+        this.userInfo = { ...this.userInfo, profileImageFile, intro };
+      }
+    }
+  }
 }
diff --git a/src/app/ucap/organization/components/profile-image-01.component.ts b/src/app/ucap/organization/components/profile-image-01.component.ts
index 5f289e9..d4dd6ac 100644
--- a/src/app/ucap/organization/components/profile-image-01.component.ts
+++ b/src/app/ucap/organization/components/profile-image-01.component.ts
@@ -8,34 +8,44 @@ import {
   ChangeDetectorRef,
   Input,
   Output,
-  EventEmitter
+  EventEmitter,
+  ChangeDetectionStrategy
 } from '@angular/core';
 
 import { Store, select } from '@ngrx/store';
 
-import { VersionInfo2Response } from '@ucap/api-public';
-import { UserInfoSS } from '@ucap/protocol-query';
-import { StatusBulkInfo } from '@ucap/protocol-status';
+import { UserInfoSS } from '@ucap/domain-organization';
+import { StatusBulkInfo } from '@ucap/domain-status';
 
 import { LogService } from '@ucap/ng-logger';
 import { PresenceSelector } from '@ucap/ng-store-organization';
+import { VersionInfo } from '@ucap/domain-authentication';
 
 @Component({
   selector: 'app-organization-profile-image-01',
   templateUrl: './profile-image-01.component.html',
-  styleUrls: ['./profile-image-01.component.scss']
+  styleUrls: ['./profile-image-01.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ProfileImage01Component implements OnInit, OnDestroy {
   @Input()
   userInfo: UserInfoSS;
 
   @Input()
-  versionInfo: VersionInfo2Response;
+  versionInfo: VersionInfo;
 
   @Output()
   openProfile: EventEmitter<UserInfoSS> = new EventEmitter();
 
-  presenceInfo: StatusBulkInfo;
+  set presenceInfo(p: StatusBulkInfo) {
+    this._presenceInfo = p;
+    this.changeDetectorRef.markForCheck();
+  }
+  get presenceInfo() {
+    return this._presenceInfo;
+  }
+  // tslint:disable-next-line: variable-name
+  _presenceInfo: StatusBulkInfo;
 
   private ngOnDestroySubject: Subject<void> = new Subject();
 
diff --git a/src/app/ucap/organization/components/profile-list.component.html b/src/app/ucap/organization/components/profile-list.component.html
index 171844a..4b8ee77 100644
--- a/src/app/ucap/organization/components/profile-list.component.html
+++ b/src/app/ucap/organization/components/profile-list.component.html
@@ -6,6 +6,7 @@
     <ng-container [ngSwitch]="nodeType">
       <ng-container *ngSwitchCase="01">
         <ucap-organization-profile-list
+          #ucapProfileList
           [userInfos]="userInfos"
           vsItemSize="61"
           [cacheSize]="cacheSize"
@@ -22,7 +23,7 @@
               <app-organization-profile-image-01
                 ucapOrganizationProfileListItem01="profileImage"
                 [userInfo]="userInfo"
-                [versionInfo]="versionInfo2Res"
+                [versionInfo]="versionInfo"
                 (openProfile)="onOpenProfile($event)"
               ></app-organization-profile-image-01>
 
@@ -38,7 +39,9 @@
                 <ng-template
                   *ngTemplateOutlet="
                     profileMoreContextTemplate;
-                    context: { userInfo: userInfo }
+                    context: {
+                      userInfo: userInfo
+                    }
                   "
                 ></ng-template>
               </div>
@@ -58,7 +61,7 @@
               <app-organization-profile-image-01
                 ucapOrganizationProfileListItem01="profileImage"
                 [userInfo]="userInfo"
-                [versionInfo]="versionInfo2Res"
+                [versionInfo]="versionInfo"
                 (openProfile)="onOpenProfile($event)"
               ></app-organization-profile-image-01>
             </ucap-organization-profile-list-item-02>
@@ -71,47 +74,13 @@
 <ng-content select="[ucapInlineEditInput='view']"></ng-content>
 
 <ng-template #profileMoreContextTemplate let-userInfo="userInfo">
-  <button
-    mat-icon-button
-    aria-label="chat"
-    [matTooltip]="'common:tooltip.chat' | ucapI18n"
-    (click)="onClickProfileContextMenu($event, 'CHAT', userInfo)"
+  <ucap-organization-profile-menu-02
+    [menuButtonType]="menuButtonType"
+    [user]="user"
+    [userInfo]="userInfo"
+    [userPermission]="userPermission"
+    [isShowMoreMenu]="false"
+    (clickProfileMenu)="onClickProfileMenu($event)"
   >
-    <img src="assets/images/ico/btn_lise_chat_a24.svg" alt="" />
-  </button>
-  <button
-    mat-icon-button
-    aria-label="message"
-    [matTooltip]="'common:tooltip.message' | ucapI18n"
-    (click)="
-      $event.stopPropagation();
-      onClickProfileContextMenu($event, 'MESSAGE', userInfo)
-    "
-  >
-    <img src="assets/images/ico/btn_list_message_a24.svg" alt="" />
-  </button>
-  <button
-    mat-icon-button
-    aria-label="mobile"
-    [matTooltip]="'common:tooltip.mobile' | ucapI18n"
-    (click)="onClickProfileContextMenu($event, 'MOBILE', userInfo)"
-  >
-    <img src="assets/images/ico/btn_list_mobile_a24.svg" alt="" />
-  </button>
-  <button
-    mat-icon-button
-    aria-label="call"
-    [matTooltip]="'common:tooltip.office' | ucapI18n"
-    (click)="onClickProfileContextMenu($event, 'OFFICE', userInfo)"
-  >
-    <img src="assets/images/ico/btn_list_call_a24.svg" alt="" />
-  </button>
-  <button
-    mat-icon-button
-    aria-label="vc"
-    [matTooltip]="'common:tooltip.videoConference' | ucapI18n"
-    (click)="onClickProfileContextMenu($event, 'VIDEO_CONFERENCE', userInfo)"
-  >
-    <img src="assets/images/ico/btn_list_vc-a24.svg" alt="" />
-  </button>
+  </ucap-organization-profile-menu-02>
 </ng-template>
diff --git a/src/app/ucap/organization/components/profile-list.component.ts b/src/app/ucap/organization/components/profile-list.component.ts
index eea75dd..3182373 100644
--- a/src/app/ucap/organization/components/profile-list.component.ts
+++ b/src/app/ucap/organization/components/profile-list.component.ts
@@ -10,24 +10,21 @@ import {
   Input,
   Output,
   EventEmitter,
-  NgZone
+  NgZone,
+  ViewChild
 } from '@angular/core';
 
 import { Store, select } from '@ngrx/store';
 
-import { SortOrder } from '@ucap/core';
-import { VersionInfo2Response } from '@ucap/api-public';
-import {
-  UserInfoSS,
-  DeptSearchType,
-  DeptUserRequest
-} from '@ucap/protocol-query';
-import { User } from '@ucap/protocol-info';
+import { SortOrder } from '@ucap/domain-common';
+import { User, UserInfoSS, DeptSearchType } from '@ucap/domain-organization';
+
+import { DeptUserRequest } from '@ucap/protocol-query';
 
 import { LogService } from '@ucap/ng-logger';
 import {
-  LoginSelector,
-  ConfigurationSelector
+  ConfigurationSelector,
+  AuthorizationSelector
 } from '@ucap/ng-store-authentication';
 import { QueryProtocolService } from '@ucap/ng-protocol-query';
 import {
@@ -37,7 +34,14 @@ import {
   UserSelector
 } from '@ucap/ng-store-organization';
 
+import {
+  ProfileListComponent as UcapProfileListComponent,
+  ProfileMenuType
+} from '@ucap/ng-ui-organization';
+
 import { SearchData } from '../models/search-data';
+import { VersionInfo } from '@ucap/domain-authentication';
+import { UserPermission } from '@ucap/domain-authorization';
 
 const DEPT_ORDER_PROPERTY = 'order';
 
@@ -69,6 +73,8 @@ export class ProfileListComponent implements OnInit, OnDestroy {
 
   @Input()
   nodeType = '01';
+  @Input()
+  menuButtonType = '1';
 
   @Input()
   cacheSize: number;
@@ -98,14 +104,18 @@ export class ProfileListComponent implements OnInit, OnDestroy {
   openProfile: EventEmitter<UserInfoSS> = new EventEmitter();
 
   @Output()
-  floatingProfileMenu: EventEmitter<{
-    menuType: string;
+  clickProfileMenu: EventEmitter<{
+    menuType: ProfileMenuType;
     userInfo: UserInfoSS;
   }> = new EventEmitter();
 
+  @ViewChild('ucapProfileList', { static: false })
+  ucapProfileList: UcapProfileListComponent;
+
   set userInfos(userInfos: UserInfoSS[]) {
     this._userInfos = userInfos;
     this.searched.emit(userInfos);
+    this.psUpdate();
   }
   get userInfos() {
     return this._userInfos;
@@ -114,11 +124,13 @@ export class ProfileListComponent implements OnInit, OnDestroy {
   _userInfos: UserInfoSS[] = [];
 
   user: User;
-  versionInfo2Res: VersionInfo2Response;
+  versionInfo: VersionInfo;
 
   showFabUserSeq: string;
 
+  userPermission: UserPermission;
   processing = false;
+  ProfileMenuType = ProfileMenuType;
   String = String;
 
   private ngOnDestroySubject: Subject<void> = new Subject();
@@ -135,10 +147,10 @@ export class ProfileListComponent implements OnInit, OnDestroy {
     this.store
       .pipe(
         takeUntil(this.ngOnDestroySubject),
-        select(ConfigurationSelector.versionInfo2Response)
+        select(ConfigurationSelector.versionInfo)
       )
-      .subscribe((versionInfo2Res) => {
-        this.versionInfo2Res = versionInfo2Res;
+      .subscribe((versionInfo) => {
+        this.versionInfo = versionInfo;
       });
 
     this.store
@@ -151,6 +163,15 @@ export class ProfileListComponent implements OnInit, OnDestroy {
           this.searchMember(tempData);
         }
       });
+
+    this.store
+      .pipe(
+        takeUntil(this.ngOnDestroySubject),
+        select(AuthorizationSelector.userPermission)
+      )
+      .subscribe((userPermission) => {
+        this.userPermission = userPermission;
+      });
   }
 
   ngOnDestroy(): void {
@@ -190,6 +211,11 @@ export class ProfileListComponent implements OnInit, OnDestroy {
     this.changedCheck.emit(unchecked);
   }
 
+  psUpdate() {
+    if (!!this.ucapProfileList) {
+      this.ucapProfileList.psUpdate();
+    }
+  }
   /** 개별 체크여부 */
   getCheckedUser(userInfo: UserInfoSS) {
     if (!!this.selectedUser && this.selectedUser.length > 0) {
@@ -371,12 +397,10 @@ export class ProfileListComponent implements OnInit, OnDestroy {
     event.stopPropagation();
   }
 
-  onClickProfileContextMenu(
-    event: MouseEvent,
-    menuType: string,
-    userInfo: UserInfoSS
-  ) {
-    this.floatingProfileMenu.emit({ menuType, userInfo });
-    event.stopPropagation();
+  onClickProfileMenu(params: {
+    menuType: ProfileMenuType;
+    userInfo: UserInfoSS;
+  }) {
+    this.clickProfileMenu.emit(params);
   }
 }
diff --git a/src/app/ucap/organization/components/profile-menu-01.component.html b/src/app/ucap/organization/components/profile-menu-01.component.html
index 0f9a673..bc45abc 100644
--- a/src/app/ucap/organization/components/profile-menu-01.component.html
+++ b/src/app/ucap/organization/components/profile-menu-01.component.html
@@ -1,7 +1,7 @@
 <div class="profile-menu-container">
   <ucap-organization-profile-menu-01
     [user]="user"
-    [versionInfo2Res]="versionInfo2Res"
+    [versionInfo]="versionInfo"
     [idleTimePeriods]="idleTimePeriods"
     [idleCheckTime]="userStore.idleCheckTime"
     placeholderForUserIntro="{{
@@ -22,7 +22,7 @@
         <app-organization-profile-image-01
           ucapOrganizationProfileListItem01="profileImage"
           [userInfo]="user.info"
-          [versionInfo]="versionInfo2Res"
+          [versionInfo]="versionInfo"
         ></app-organization-profile-image-01>
       </ucap-organization-profile-list-item-02>
     </ng-template>
diff --git a/src/app/ucap/organization/components/profile-menu-01.component.ts b/src/app/ucap/organization/components/profile-menu-01.component.ts
index 19d2850..51fc42c 100644
--- a/src/app/ucap/organization/components/profile-menu-01.component.ts
+++ b/src/app/ucap/organization/components/profile-menu-01.component.ts
@@ -13,9 +13,8 @@ import {
 
 import { Store, select } from '@ngrx/store';
 
-import { StatusType, StatusCode } from '@ucap/core';
-import { VersionInfo2Response } from '@ucap/api-public';
-import { User, UserInfoUpdateType } from '@ucap/protocol-info';
+import { User, UserInfoUpdateType } from '@ucap/domain-organization';
+import { StatusType, StatusCode } from '@ucap/domain-status';
 
 import { LogService } from '@ucap/ng-logger';
 
@@ -29,6 +28,7 @@ import { ConfigurationSelector } from '@ucap/ng-store-authentication';
 import { AppAuthenticationService } from '@app/services/app-authentication.service';
 import { UserStore } from '@app/models/user-store';
 import { AppActions } from '@app/store/actions';
+import { VersionInfo } from '@ucap/domain-authentication';
 
 @Component({
   selector: 'app-organization-profile-menu-01',
@@ -59,7 +59,7 @@ export class ProfileMenu01Component implements OnInit, OnDestroy {
 
   userStore: UserStore;
 
-  versionInfo2Res: VersionInfo2Response;
+  versionInfo: VersionInfo;
 
   idleTimePeriods: number[] = [10, 20, 30];
 
@@ -83,10 +83,10 @@ export class ProfileMenu01Component implements OnInit, OnDestroy {
     this.store
       .pipe(
         takeUntil(this.ngOnDestroySubject),
-        select(ConfigurationSelector.versionInfo2Response)
+        select(ConfigurationSelector.versionInfo)
       )
-      .subscribe((versionInfo2Res) => {
-        this.versionInfo2Res = versionInfo2Res;
+      .subscribe((versionInfo) => {
+        this.versionInfo = versionInfo;
       });
 
     this.appAuthenticationService
diff --git a/src/app/ucap/organization/components/profile-navigation-list.component.html b/src/app/ucap/organization/components/profile-navigation-list.component.html
index cca0e6d..6f0be07 100644
--- a/src/app/ucap/organization/components/profile-navigation-list.component.html
+++ b/src/app/ucap/organization/components/profile-navigation-list.component.html
@@ -26,14 +26,20 @@
   <div class="profile-navigation-list-progressbar">
     <mat-progress-bar mode="query" *ngIf="processing"></mat-progress-bar>
   </div>
-  <div class="profile-navigation-list">
+  <div class="profile-navigation-list" *ngIf="!processing">
     <ucap-virtual-scroll-viewport
       #cvsvList
       fxFlexFill
       perfectScrollbar
       [itemSize]="itemSize"
     >
-      <ng-container *ucapVirtualFor="let item of nodes; let index = index">
+      <ng-container
+        *ucapVirtualFor="
+          let item of nodes;
+          let index = index;
+          templateCacheSize: cacheSize
+        "
+      >
         <div [style.height.px]="itemSize">
           <ng-container [ngSwitch]="item.nodeType">
             <ng-container *ngSwitchCase="NodeType.dept">
@@ -45,28 +51,14 @@
               </div>
             </ng-container>
             <ng-container *ngSwitchCase="NodeType.member">
-              <ucap-organization-profile-list-item-02
+              <app-group-profile-list-item-04
                 [userInfo]="item.node"
                 [checkable]="getCheckableUser(item.node)"
                 [checked]="getCheckedUser(item.node)"
+                [useFAB]="useFAB"
+                [menuButtonType]="3"
                 (changeCheck)="onChangeCheckUser($event)"
-                class="list-member-info"
-              >
-                <app-organization-profile-image-01
-                  ucapOrganizationProfileListItem01="profileImage"
-                  [userInfo]="item.node"
-                  [versionInfo]="versionInfo2Res"
-                ></app-organization-profile-image-01>
-                <div
-                  class="intro-content"
-                  appProfileListItemUserInfo="info"
-                  *ngIf="!!item.node.intro && item.node.intro.trim() !== ''"
-                >
-                  <div [ngClass]="statusMsgClass">
-                    <p>{{ _userStatusMessage(item.node) }}</p>
-                  </div>
-                </div>
-              </ucap-organization-profile-list-item-02>
+              ></app-group-profile-list-item-04>
             </ng-container>
           </ng-container>
         </div>
diff --git a/src/app/ucap/organization/components/profile-navigation-list.component.scss b/src/app/ucap/organization/components/profile-navigation-list.component.scss
index 4b6c8b3..7041827 100644
--- a/src/app/ucap/organization/components/profile-navigation-list.component.scss
+++ b/src/app/ucap/organization/components/profile-navigation-list.component.scss
@@ -51,7 +51,7 @@
   .profile-navigation-list {
     width: 100%;
     height: calc(100% - 55px);
-
+    background-color: #ffffff;
     .list-dept-name {
       padding: 0 5px;
       position: relative;
@@ -60,7 +60,7 @@
       height: 60px;
       color: #666;
       font-weight: 600;
-      border-top: 1px solid #ccc;
+      border-bottom: 1px solid #ccc;
       cursor: pointer;
       &:before {
         content: 'account_tree';
@@ -91,6 +91,8 @@
       border-top: 1px solid #ccc;
       width: calc(100% - 7px);
       height: 60px;
+      position: absolute;
+      width: 100%;
     }
 
     .ng-star-inserted {
diff --git a/src/app/ucap/organization/components/profile-navigation-list.component.ts b/src/app/ucap/organization/components/profile-navigation-list.component.ts
index 24c4f95..54224d0 100644
--- a/src/app/ucap/organization/components/profile-navigation-list.component.ts
+++ b/src/app/ucap/organization/components/profile-navigation-list.component.ts
@@ -16,19 +16,16 @@ import {
 
 import { Store, select } from '@ngrx/store';
 
-import { VersionInfo2Response } from '@ucap/api-public';
 import {
+  User,
   DeptSearchType,
-  DeptUserRequest,
   DeptInfo,
   UserInfoSS
-} from '@ucap/protocol-query';
+} from '@ucap/domain-organization';
+
+import { DeptUserRequest } from '@ucap/protocol-query';
 
 import { LogService } from '@ucap/ng-logger';
-import {
-  LoginSelector,
-  ConfigurationSelector
-} from '@ucap/ng-store-authentication';
 import { QueryProtocolService } from '@ucap/ng-protocol-query';
 import {
   DepartmentSelector,
@@ -38,8 +35,9 @@ import {
 
 import { UserInfoTypes } from '@app/types';
 
-import { BreadcrumbComponent } from '@ucap/ng-ui';
-import { User } from '@ucap/protocol-info';
+import { BreadcrumbComponent } from '@ucap/ng-ui/breadcrumb';
+
+import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
 
 const DEPT_ORDER_PROPERTY = 'order';
 
@@ -74,6 +72,15 @@ export class ProfileNavigationListComponent implements OnInit, OnDestroy {
   @Input()
   displayRootDepartment = false;
 
+  @Input()
+  cacheSize = 0;
+
+  @Input()
+  checkable = true;
+
+  @Input()
+  useFAB = false;
+
   @Output()
   searched: EventEmitter<UserInfoTypes[]> = new EventEmitter();
 
@@ -83,6 +90,9 @@ export class ProfileNavigationListComponent implements OnInit, OnDestroy {
   @ViewChild('breadcrumbForOrganization', { static: false })
   breadcrumbForOrganization: BreadcrumbComponent;
 
+  @ViewChild(PerfectScrollbarDirective, { static: false })
+  psDirectiveRef: PerfectScrollbarDirective;
+
   set departmentCode(departmentCode: number) {
     this._departmentCode = departmentCode;
     this._changedDepartmentCode();
@@ -115,7 +125,6 @@ export class ProfileNavigationListComponent implements OnInit, OnDestroy {
   _childLevelDeptInfoList: DeptInfo[] = [];
 
   user: User;
-  versionInfo2Res: VersionInfo2Response;
 
   breadcrumbs: DeptInfo[];
   departmentInfoList: DeptInfo[] = [];
@@ -138,15 +147,6 @@ export class ProfileNavigationListComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit(): void {
-    this.store
-      .pipe(
-        takeUntil(this.ngOnDestroySubject),
-        select(ConfigurationSelector.versionInfo2Response)
-      )
-      .subscribe((versionInfo2Res) => {
-        this.versionInfo2Res = versionInfo2Res;
-      });
-
     this.store
       .pipe(takeUntil(this.ngOnDestroySubject), select(UserSelector.user))
       .subscribe((user) => {
@@ -204,6 +204,10 @@ export class ProfileNavigationListComponent implements OnInit, OnDestroy {
 
   /** 개별 체크가능 여부 */
   getCheckableUser(userInfo: UserInfoTypes) {
+    if (!this.checkable) {
+      return false;
+    }
+
     let rtnValue = true;
 
     if (!!this.fixedUserList && this.fixedUserList.length > 0) {
@@ -298,6 +302,10 @@ export class ProfileNavigationListComponent implements OnInit, OnDestroy {
         () => {
           this.processing = false;
           this.changeDetectorRef.markForCheck();
+
+          if (!!this.psDirectiveRef) {
+            this.psDirectiveRef.update();
+          }
         }
       );
   }
diff --git a/src/app/ucap/organization/components/search-for-tenant.component.html b/src/app/ucap/organization/components/search-for-tenant.component.html
index 2c24ed1..99e3d5c 100644
--- a/src/app/ucap/organization/components/search-for-tenant.component.html
+++ b/src/app/ucap/organization/components/search-for-tenant.component.html
@@ -1,12 +1,15 @@
 <div class="search-container">
   <ucap-organization-search-for-tenant
     #ucapOrgSearchForTenant
-    [companyList]="companyList"
-    [defaultCompany]="searchData.companyCode"
+    [companyList]="filteredCompanyList"
+    [defaultCompany]="
+      !this.preCompanyCode ? searchData.companyCode : this.preCompanyCode
+    "
     [defaultSearchWord]="searchData.searchWord"
-    placeholder="이름, 부서명, 전화번호, 이메일"
+    placeholder="{{ 'organization:label.searchPlaceholder' | ucapI18n }}"
     (changed)="onChanged($event)"
     (canceled)="onCanceled()"
+    (keyDownBackspace)="onKeyupBackspace($event)"
   >
   </ucap-organization-search-for-tenant>
 </div>
diff --git a/src/app/ucap/organization/components/search-for-tenant.component.ts b/src/app/ucap/organization/components/search-for-tenant.component.ts
index b5d1c03..8c46810 100644
--- a/src/app/ucap/organization/components/search-for-tenant.component.ts
+++ b/src/app/ucap/organization/components/search-for-tenant.component.ts
@@ -15,7 +15,7 @@ import {
 
 import { Store, select } from '@ngrx/store';
 
-import { Company } from '@ucap/api-external';
+import { Company } from '@ucap/domain-organization';
 
 import { LogService } from '@ucap/ng-logger';
 import { CompanySelector } from '@ucap/ng-store-organization';
@@ -33,6 +33,9 @@ import { SearchForTenantComponent as UcapSearchForTenantComponent } from '@ucap/
 })
 export class SearchForTenantComponent implements OnInit, OnDestroy {
   @Output() searchDataChange: EventEmitter<SearchData> = new EventEmitter();
+  @Input()
+  isBackspaceCanceled = false;
+
   @Input() set searchData(value: SearchData) {
     let data: SearchData = {
       ...value
@@ -57,13 +60,48 @@ export class SearchForTenantComponent implements OnInit, OnDestroy {
   // tslint:disable-next-line: variable-name
   _searchData: SearchData;
 
+  @Input()
+  set filteredTimerChatAuth(value: boolean) {
+    this._filteredTimerChatAuth = value;
+    this._filteredCompanyList();
+  }
+  get filteredTimerChatAuth(): boolean {
+    return this._filteredTimerChatAuth;
+  }
+  // tslint:disable-next-line: variable-name
+  _filteredTimerChatAuth = false;
+
+  @Input()
+  set filteredConferenceAuth(value: boolean) {
+    this._filteredConferenceAuth = value;
+    this._filteredCompanyList();
+  }
+  get filteredConferenceAuth(): boolean {
+    return this._filteredConferenceAuth;
+  }
+  // tslint:disable-next-line: variable-name
+  _filteredConferenceAuth = false;
+
+  @Input()
+  set filteredUcapUse(value: boolean) {
+    this._filteredUcapUse = value;
+    this._filteredCompanyList();
+  }
+  get filteredUcapUse(): boolean {
+    return this._filteredUcapUse;
+  }
+  // tslint:disable-next-line: variable-name
+  _filteredUcapUse = false;
+
   @Output()
   canceled: EventEmitter<void> = new EventEmitter();
 
   @ViewChild('ucapOrgSearchForTenant', { static: true })
   searchForTenant: UcapSearchForTenantComponent;
 
-  companyList: Company[];
+  originalCompanyList: Company[];
+  filteredCompanyList: Company[];
+  preCompanyCode: string;
 
   private ngOnDestroySubject: Subject<void> = new Subject();
   private userStore: UserStore;
@@ -84,7 +122,8 @@ export class SearchForTenantComponent implements OnInit, OnDestroy {
         select(CompanySelector.companyList)
       )
       .subscribe((companyList) => {
-        this.companyList = companyList;
+        this.originalCompanyList = companyList;
+        this._filteredCompanyList();
       });
   }
 
@@ -99,6 +138,8 @@ export class SearchForTenantComponent implements OnInit, OnDestroy {
     if (!!data && data.searchWord.localeCompare('') === 0) {
       return;
     }
+    this.preCompanyCode = data.companyCode;
+
     this.searchDataChange.emit({
       companyCode: data.companyCode,
       searchWord: data.searchWord
@@ -111,4 +152,40 @@ export class SearchForTenantComponent implements OnInit, OnDestroy {
 
     this.canceled.emit();
   }
+
+  onKeyupBackspace(event: MouseEvent) {
+    if (!!this.isBackspaceCanceled) {
+      this.searchForTenant.onClickCancel(event);
+    }
+  }
+
+  private _filteredCompanyList() {
+    let filteredList = [];
+    if (!!this.originalCompanyList) {
+      filteredList = this.originalCompanyList
+        .filter((item) => {
+          if (!!this.filteredTimerChatAuth && !item.companyTimerChatAuth) {
+            return false;
+          } else {
+            return true;
+          }
+        })
+        .filter((item) => {
+          if (!!this.filteredConferenceAuth && !item.companyConfAuth) {
+            return false;
+          } else {
+            return true;
+          }
+        })
+        .filter((item) => {
+          if (!!this.filteredUcapUse && !item.ucapUse) {
+            return false;
+          } else {
+            return true;
+          }
+        });
+    }
+
+    this.filteredCompanyList = filteredList;
+  }
 }
diff --git a/src/app/ucap/organization/components/tree.component.ts b/src/app/ucap/organization/components/tree.component.ts
index 1d37b34..95f18f5 100644
--- a/src/app/ucap/organization/components/tree.component.ts
+++ b/src/app/ucap/organization/components/tree.component.ts
@@ -1,5 +1,5 @@
 import { Subject, combineLatest } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { takeUntil, take } from 'rxjs/operators';
 
 import {
   Component,
@@ -10,20 +10,27 @@ import {
   EventEmitter,
   Output,
   ViewChild,
-  Input
+  Input,
+  AfterViewInit
 } from '@angular/core';
 
 import { Store, select } from '@ngrx/store';
 
-import { DeptInfo } from '@ucap/protocol-query';
+import { DeptInfo } from '@ucap/domain-organization';
 
 import { LogService } from '@ucap/ng-logger';
 
-import { DepartmentSelector } from '@ucap/ng-store-organization';
+import {
+  DepartmentSelector,
+  PresenceSelector
+} from '@ucap/ng-store-organization';
 
 import { TreeComponent as UCAPTreeComponent } from '@ucap/ng-ui-organization';
 
 import { environment } from '@environments';
+import { AppSelector } from '@app/store/state';
+import { WindowSizeMode } from '@app/types/window-size-mode.type';
+import { AppUiService } from '@app/services/app-ui.service';
 
 @Component({
   selector: 'app-organization-tree',
@@ -41,6 +48,10 @@ export class TreeComponent implements OnInit, OnDestroy {
     }
     this._initialExpanded = seq;
   }
+
+  @Input()
+  windowSizeMode: WindowSizeMode;
+
   // tslint:disable-next-line: variable-name
   _initialExpanded: number;
 
@@ -57,13 +68,15 @@ export class TreeComponent implements OnInit, OnDestroy {
   };
 
   currentDeptSeq: number;
+  openedLeftSideNav: boolean;
 
   private ngOnDestroySubject: Subject<void> = new Subject();
 
   constructor(
     private store: Store<any>,
     private changeDetectorRef: ChangeDetectorRef,
-    private logService: LogService
+    private logService: LogService,
+    private appUiService: AppUiService
   ) {}
 
   ngOnInit(): void {
@@ -79,11 +92,34 @@ export class TreeComponent implements OnInit, OnDestroy {
             ? [this._initialExpanded]
             : undefined
         };
+
         this.changeDetectorRef.markForCheck();
         if (!!deptInfoList) {
           this._initialExpanded = undefined;
         }
       });
+
+    this.store
+      .pipe(
+        takeUntil(this.ngOnDestroySubject),
+        select(AppSelector.openedLeftSideNav)
+      )
+      .subscribe((openedLeftSideNav) => {
+        this.openedLeftSideNav = openedLeftSideNav;
+        if (!!openedLeftSideNav) {
+          this.expand(this.currentDeptSeq);
+        }
+      });
+    this.store
+      .pipe(
+        takeUntil(this.ngOnDestroySubject),
+        select(PresenceSelector.statusBulkInfoProcessing)
+      )
+      .subscribe((statusBulkInfo) => {
+        if (!!this.openedLeftSideNav) {
+          this.expand(this.currentDeptSeq);
+        }
+      });
   }
 
   ngOnDestroy(): void {
@@ -100,6 +136,10 @@ export class TreeComponent implements OnInit, OnDestroy {
 
   expand(deptSeq: number) {
     this.treeList.expand(deptSeq);
+
+    if (!!this.treeList && this.treeList.vsvList) {
+      this.treeList.vsvList.checkViewportSize();
+    }
   }
 
   expandAll() {
diff --git a/src/app/ucap/organization/organization.module.ts b/src/app/ucap/organization/organization.module.ts
index 79ed236..b115905 100644
--- a/src/app/ucap/organization/organization.module.ts
+++ b/src/app/ucap/organization/organization.module.ts
@@ -18,10 +18,14 @@ import { MatTreeModule } from '@angular/material/tree';
 import { MatTooltipModule } from '@angular/material/tooltip';
 
 import { I18nModule } from '@ucap/ng-i18n';
-import { UiModule } from '@ucap/ng-ui';
+
+import { UiBreadcrumbModule } from '@ucap/ng-ui/breadcrumb';
+import { UiscrollingModule } from '@ucap/ng-ui/scrolling';
+
 import { OrganizationUiModule } from '@ucap/ng-ui-organization';
 
 import { COMPONENTS } from './components';
+import { AppGroupModule } from '../group/group.module';
 
 @NgModule({
   imports: [
@@ -42,9 +46,14 @@ import { COMPONENTS } from './components';
     MatTooltipModule,
 
     PerfectScrollbarModule,
+
     I18nModule,
-    UiModule,
-    OrganizationUiModule
+    UiBreadcrumbModule,
+    UiscrollingModule,
+
+    OrganizationUiModule,
+
+    AppGroupModule
   ],
   exports: [...COMPONENTS],
   declarations: [...COMPONENTS],
diff --git a/src/assets/fonts/materialdesignicons/scss/_variables.scss b/src/assets/fonts/materialdesignicons/scss/_variables.scss
index 8adad0f..154220b 100644
--- a/src/assets/fonts/materialdesignicons/scss/_variables.scss
+++ b/src/assets/fonts/materialdesignicons/scss/_variables.scss
@@ -2,7 +2,7 @@ $mdi-filename: 'materialdesignicons';
 $mdi-font-name: 'Material Design Icons';
 $mdi-font-family: 'materialdesignicons';
 $mdi-font-weight: 'normal';
-$mdi-font-path: 'assets/fonts/materialdesignicons/fonts' !default;
+$mdi-font-path: '/assets/fonts/materialdesignicons/fonts' !default;
 $mdi-font-size-base: 24px !default;
 $mdi-css-prefix: mdi !default;
 $mdi-version: '5.0.45' !default;
diff --git a/src/assets/i18n/en/call.json b/src/assets/i18n/en/call.json
index 1b539f1..fe16eb3 100644
--- a/src/assets/i18n/en/call.json
+++ b/src/assets/i18n/en/call.json
@@ -1,4 +1,21 @@
 {
+  "label": {
+    "call": "Phone call",
+    "dialpad": "Dialpad",
+    "error": "Call Error",
+    "callHistory": "Call History",
+    "organization": "Organization",
+    "all": "All",
+    "send": "Send",
+    "recieve": "Recieve",
+    "missed": "Missed",
+    "unanswered": "Unanswered"
+  },
+  "noSelectHistory": "No Selected.",
+  "errors": {
+    "inputCallNumber": "Please enter phone number.",
+    "noExistTargetNumber": "There is no other party's phone number."
+  },
   "settings": {
     "label": "Phone call"
   }
diff --git a/src/assets/i18n/en/chat.json b/src/assets/i18n/en/chat.json
index 5d84f26..5453645 100644
--- a/src/assets/i18n/en/chat.json
+++ b/src/assets/i18n/en/chat.json
@@ -57,6 +57,21 @@
       "dragHere": "Drag files to this area to upload them."
     }
   },
+  "conference": {
+    "detailView": "Detail View",
+    "videoConferenceTypeNow": "[Video Meeting] Registered",
+    "videoConferenceTypeNew": "[Video Meeting] Reservation",
+    "videoConferenceTypeUpdate": "[Video Meeting] Modified",
+    "videoConferenceTypeDelete": "[Video Meeting] Deleted",
+    "videoConferenceRegister": "Establisher",
+    "videoConferenceAttendee": "Participants",
+    "videoConferenceRoomNo": "Room No",
+    "videoConferenceRoomURL": "Room URL",
+    "videoConferenceRoomPassword": "Room Password",
+    "videoConferenceDate": "Date",
+    "videoConferenceRoom": "Meeting Room",
+    "videoConferenceEnjoy": "Attend"
+  },
   "event": {
     "inviteToRoomWith": "<strong>{{owner}}</strong> invited <strong>{{inviter}}</strong>.",
     "exitFromRoomWith": "<strong>{{exitor}}</strong> has left.",
diff --git a/src/assets/i18n/en/common.json b/src/assets/i18n/en/common.json
index 7c9a4b3..1722aa4 100644
--- a/src/assets/i18n/en/common.json
+++ b/src/assets/i18n/en/common.json
@@ -49,12 +49,14 @@
     "refresh": "Refresh",
     "downloading": "Downloading...",
     "errors": {
+      "title": "Error",
       "failToUpload": "File upload failed.",
       "noPreview": "This file does not support preview.",
       "cantPlay": "This file does not support playing.",
       "notSupporedType": "File format is not supported. <br/> ({{supporedType}})",
       "notAcceptableMime": "File type is invalid. <br/> ({{supporedType}})",
-      "oversize": "You cannot upload files larger than {{size}} megabytes."
+      "oversize": "You cannot upload files larger than {{size}} megabytes.",
+      "disapprovalCompany": "Due to company security policy, files transferred from other companies cannot be downloaded."
     }
   },
   "player": {
diff --git a/src/assets/i18n/en/group.json b/src/assets/i18n/en/group.json
index 32e9250..bc3a080 100644
--- a/src/assets/i18n/en/group.json
+++ b/src/assets/i18n/en/group.json
@@ -16,12 +16,14 @@
   },
   "dialog": {
     "title": {
+      "addNewBuddy": "Add new buddy",
       "addBuddy": "Add a Buddy",
       "removeBuddy": "Remove a buddy",
       "removeGroup": "Remove a group",
       "createGroup": "Create a group",
-      "subTitleGroupInfo": "Group information registration",
-      "subTitleSelectMember": "Member selection",
+      "subGroupInfo": "Group information registration",
+      "subSelectMember": "Member selection",
+      "subSelectGroup": "Group selection",
       "copyGroup": "Copy Group",
       "moveGroup": "Move Group",
       "addMember": "Add a Member",
@@ -32,7 +34,9 @@
       "cancel": "Cancel",
       "compleate": "Compleate",
       "addGroupCompleate": "Add group completed",
-      "selectMemberAndComplete": "Select member and complete."
+      "addBuddyCompleate": "Add buddy completed",
+      "selectMemberAndComplete": "Select member and complete.",
+      "selectGroupAndComplete": "Select group and complete."
     },
     "newGroupName": "Please enter a new group name",
     "newNickname": "Please enter a new nickname",
@@ -73,8 +77,8 @@
     "setNickname": "Set Nickname",
     "copyGroupMember": "Copy Group",
     "moveGroupMember": "Move Group",
-    "moveBuddy": "Move Member",
-    "copyBuddy": "Copy Member",
+    "moveBuddy": "MMove to another group",
+    "copyBuddy": "Copy to another group",
     "removeBuddyFromGroup": "Remove Member"
   }
 }
diff --git a/src/assets/i18n/en/locale.json b/src/assets/i18n/en/locale.json
index 80060ff..9df0850 100644
--- a/src/assets/i18n/en/locale.json
+++ b/src/assets/i18n/en/locale.json
@@ -52,6 +52,7 @@
     "Africa/Ndjamena": "Africa/Ndjamena",
     "Africa/Niamey": "Africa/Niamey",
     "Africa/Nouakchott": "Africa/Nouakchott",
+    "America/Nuuk": "Africa/Nuuk",
     "Africa/Ouagadougou": "Africa/Ouagadougou",
     "Africa/Porto-Novo": "Africa/Porto-Novo",
     "Africa/Sao_Tome": "Africa/Sao_Tome",
diff --git a/src/assets/i18n/en/organization.json b/src/assets/i18n/en/organization.json
index 2028e9b..8d3a6d4 100644
--- a/src/assets/i18n/en/organization.json
+++ b/src/assets/i18n/en/organization.json
@@ -8,7 +8,8 @@
     "call": "Call",
     "videoConference": "Video Conference",
     "searchResult": "Search Result",
-    "sortName": "Name"
+    "sortName": "Name",
+    "searchPlaceholder": "name, department name, phone number, email"
   },
   "presence": {
     "offline": "Offline",
diff --git a/src/assets/i18n/ko/call.json b/src/assets/i18n/ko/call.json
index 26d7d24..b3411a5 100644
--- a/src/assets/i18n/ko/call.json
+++ b/src/assets/i18n/ko/call.json
@@ -1,4 +1,21 @@
 {
+  "label": {
+    "call": "통화",
+    "dialpad": "다이얼 패드",
+    "error": "통화오류",
+    "callHistory": "통화기록",
+    "organization": "조직도",
+    "all": "전체",
+    "send": "발신",
+    "recieve": "수신",
+    "missed": "부재중",
+    "unanswered": "미응답"
+  },
+  "noSelectHistory": "선택된 사용자가 없습니다.",
+  "errors": {
+    "inputCallNumber": "전화번호를 입력해 주세요.",
+    "noExistTargetNumber": "상대방 전화번호가 없습니다."
+  },
   "settings": {
     "label": "통화"
   }
diff --git a/src/assets/i18n/ko/chat.json b/src/assets/i18n/ko/chat.json
index 96402b5..470eb6a 100644
--- a/src/assets/i18n/ko/chat.json
+++ b/src/assets/i18n/ko/chat.json
@@ -57,6 +57,21 @@
       "dragHere": "이 영역으로 파일을 드래그 하시면 업로드 됩니다."
     }
   },
+  "conference": {
+    "detailView": "상세 보기",
+    "videoConferenceTypeNow": "[화상회의] 개설",
+    "videoConferenceTypeNew": "[화상회의] 예약",
+    "videoConferenceTypeUpdate": "[화상회의] 수정",
+    "videoConferenceTypeDelete": "[화상회의] 삭제",
+    "videoConferenceRegister": "개설자",
+    "videoConferenceAttendee": "참여자",
+    "videoConferenceRoomNo": "미팅번호",
+    "videoConferenceRoomURL": "URL",
+    "videoConferenceRoomPassword": "비밀번호",
+    "videoConferenceDate": "날짜",
+    "videoConferenceRoom": "회의실",
+    "videoConferenceEnjoy": "참석하기"
+  },
   "event": {
     "inviteToRoomWith": "<strong>{{owner}}</strong>님이 <strong>{{inviter}}</strong>님을 초대했습니다.",
     "exitFromRoomWith": "<strong>{{exitor}}<strong>님이 퇴장하셨습니다.",
diff --git a/src/assets/i18n/ko/common.json b/src/assets/i18n/ko/common.json
index 51d2eb8..7e2ba29 100644
--- a/src/assets/i18n/ko/common.json
+++ b/src/assets/i18n/ko/common.json
@@ -49,12 +49,14 @@
     "refresh": "새로고침",
     "downloading": "다운로드중...",
     "errors": {
+      "title": "오류",
       "failToUpload": "파일 업로드에 실패하였습니다.",
       "noPreview": "미리보기를 지원하지 않는 파일입니다.",
       "cantPlay": "재생을 지원하지 않는 파일입니다.",
       "notSupporedType": "지원하지 않는 파일형식입니다. <br/> ({{supporedType}})",
       "notAcceptableMime": "유효하지 않은 파일 타입입니다. <br/> ({{supporedType}})",
-      "oversize": "{{maxSize}}MB 이상 파일을 업로드 할 수 없습니다."
+      "oversize": "{{maxSize}}MB 이상 파일을 업로드 할 수 없습니다.",
+      "disapprovalCompany": "회사 보안 정책 상, 타 회사에서 전송한 파일은 다운로드 할 수 없습니다."
     }
   },
   "player": {
diff --git a/src/assets/i18n/ko/group.json b/src/assets/i18n/ko/group.json
index e2efd5f..be057f5 100644
--- a/src/assets/i18n/ko/group.json
+++ b/src/assets/i18n/ko/group.json
@@ -17,12 +17,14 @@
   },
   "dialog": {
     "title": {
+      "addNewBuddy": "새 멤버 추가",
       "addBuddy": "동료추가",
       "removeBuddy": "동료삭제",
       "removeGroup": "그룹삭제",
       "createGroup": "그룹생성",
-      "subTitleGroupInfo": "그룹정보 등록",
-      "subTitleSelectMember": "멤버 선택",
+      "subGroupInfo": "그룹정보 등록",
+      "subSelectMember": "멤버 선택",
+      "subSelectGroup": "그룹 선택",
       "copyGroup": "그룹 멤버 복사",
       "moveGroup": "그룹 멤버 이동",
       "managementGroup": "그룹 멤버 관리",
@@ -33,7 +35,9 @@
       "cancel": "취소",
       "compleate": "완료",
       "addGroupCompleate": "그룹 추가 완료",
-      "selectMemberAndComplete": "멤버 선택 후 완료"
+      "addBuddyCompleate": "멤버 추가 완료",
+      "selectMemberAndComplete": "멤버 선택 후 완료",
+      "selectGroupAndComplete": "그룹 지정 후 완료"
     },
     "newGroupName": "새로운 그룹명을 입력 해 주세요",
     "newNickname": "닉네임을 설정하세요.",
@@ -74,8 +78,8 @@
     "setNickname": "닉네임 설정",
     "copyGroupMember": "그룹 복사",
     "moveGroupMember": "그룹 이동",
-    "moveBuddy": "대화상대 이동",
-    "copyBuddy": "대화상대 복사",
+    "moveBuddy": "다른 그룹으로 이동",
+    "copyBuddy": "다른 그룹으로 복사",
     "removeBuddyFromGroup": "이 그룹에서 삭제"
   }
 }
diff --git a/src/assets/i18n/ko/locale.json b/src/assets/i18n/ko/locale.json
index 66c4c41..48aa5b6 100644
--- a/src/assets/i18n/ko/locale.json
+++ b/src/assets/i18n/ko/locale.json
@@ -180,6 +180,7 @@
     "America/North_Dakota/Beulah": "아메리카/노스 다코타/부라",
     "America/North_Dakota/Center": "아메리카/노스 다코타/센터",
     "America/North_Dakota/New_Salem": "아메리카/노스 다코타/뉴 살렘",
+    "America/Nuuk": "아메리카/누크",
     "America/Ojinaga": "아메리카/오지나가",
     "America/Panama": "아메리카/파나마",
     "America/Pangnirtung": "아메리카/판니르퉁",
diff --git a/src/assets/i18n/ko/organization.json b/src/assets/i18n/ko/organization.json
index f963948..c421f46 100644
--- a/src/assets/i18n/ko/organization.json
+++ b/src/assets/i18n/ko/organization.json
@@ -8,7 +8,8 @@
     "call": "전화",
     "videoConference": "화상",
     "searchResult": "검색결과",
-    "sortName": "이름"
+    "sortName": "이름",
+    "searchPlaceholder": "이름, 부서명, 전화번호, 이메일"
   },
   "presence": {
     "offline": "오프라인",
diff --git a/src/assets/images/ico/img_logout.png b/src/assets/images/ico/img_logout.png
new file mode 100644
index 0000000000000000000000000000000000000000..4cae2be2c4970c8d226e9767185e4f5f98a37880
GIT binary patch
literal 56667
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

literal 0
HcmV?d00001

diff --git a/src/assets/images/ico/img_logout_text.svg b/src/assets/images/ico/img_logout_text.svg
new file mode 100644
index 0000000..5086f73
--- /dev/null
+++ b/src/assets/images/ico/img_logout_text.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="252" height="62" viewBox="0 0 252 62">
+    <defs>
+        <style>
+            .prefix__cls-3{fill:#f83772}
+        </style>
+    </defs>
+    <g id="prefix__img_logout_text" transform="translate(-834 -293)">
+        <path id="prefix__패스_931" fill="#2d2a2c" d="M-82.71-6.24V0h-24.12v-39.54h7.98v33.3zm1.74-13.74q0-10.14 4.59-15.15t14.07-5.01a20.8 20.8 0 0 1 8.16 1.41 13 13 0 0 1 5.34 4.08 17.275 17.275 0 0 1 2.97 6.51 36.506 36.506 0 0 1 .93 8.58q0 10.08-4.62 15.15T-63.63.66a20.368 20.368 0 0 1-8.19-1.44 13.169 13.169 0 0 1-5.31-4.14 17.22 17.22 0 0 1-2.94-6.48 37.178 37.178 0 0 1-.9-8.58zm27.78-.36a31.931 31.931 0 0 0-.42-5.31 14.1 14.1 0 0 0-1.44-4.38 7.985 7.985 0 0 0-2.76-3 8.12 8.12 0 0 0-4.44-1.11 11.336 11.336 0 0 0-4.98.99 8.2 8.2 0 0 0-3.3 2.88 12.7 12.7 0 0 0-1.8 4.65 33.027 33.027 0 0 0-.54 6.3 32.32 32.32 0 0 0 .42 5.37 12.847 12.847 0 0 0 1.5 4.35 8.655 8.655 0 0 0 2.79 2.97 7.846 7.846 0 0 0 4.35 1.11 11.85 11.85 0 0 0 5.13-.99 7.817 7.817 0 0 0 3.27-2.85 12.72 12.72 0 0 0 1.71-4.62 35.3 35.3 0 0 0 .51-6.36zm47.46 18.3a28.255 28.255 0 0 1-6.51 2.01 41.944 41.944 0 0 1-7.83.69q-10.08 0-14.76-5.31t-4.68-15.09q0-10.14 5.25-15.27t14.55-5.13a24.348 24.348 0 0 1 8.19 1.35 14.781 14.781 0 0 1 6.45 4.47L-9.93-30a12.961 12.961 0 0 0-4.05-3 12.822 12.822 0 0 0-5.61-1.14q-5.76 0-8.76 3.84t-3 11.1q0 6.78 3.06 10.2t8.7 3.42q1.74 0 3.6-.18 1.26-.24 2.52-.54v-9.3h-8.22v-6.06h15.96zm81.18-37.5v23.82a22.544 22.544 0 0 1-1.08 7.41 12.649 12.649 0 0 1-3.15 5.07 12.872 12.872 0 0 1-5.1 2.94 22.717 22.717 0 0 1-6.87.96q-7.68 0-11.43-3.93t-3.75-12.87v-23.4h7.92v24.36a13.191 13.191 0 0 0 1.65 7.14q1.65 2.58 5.55 2.58 4.56 0 6.45-2.43t1.89-8.31v-23.34zm35.22 0v6.24H99.03V0h-7.92v-33.3H79.47v-6.24z" data-name="패스 931" transform="translate(960 344.14)"/>
+        <g id="prefix__그룹_334" data-name="그룹 334" transform="translate(6 11)">
+            <rect id="prefix__사각형_613" width="6" height="17" class="prefix__cls-3" data-name="사각형 613" rx="3" transform="translate(970 290)"/>
+            <path id="prefix__빼기_10" d="M-85-742a19.876 19.876 0 0 1-14.142-5.854A19.849 19.849 0 0 1-105-761.986a19.922 19.922 0 0 1 1.151-6.7 19.9 19.9 0 0 1 3.188-5.733 20.053 20.053 0 0 1 4.828-4.371 19.862 19.862 0 0 1 6.071-2.613v6.5a13.816 13.816 0 0 0-9.013 12.919A13.785 13.785 0 0 0-85-748.221a13.785 13.785 0 0 0 13.774-13.765 13.819 13.819 0 0 0-9.012-12.914v-6.5a19.86 19.86 0 0 1 6.071 2.613 20.053 20.053 0 0 1 4.828 4.371 19.9 19.9 0 0 1 3.188 5.733 19.922 19.922 0 0 1 1.151 6.7 19.849 19.849 0 0 1-5.858 14.133A19.876 19.876 0 0 1-85-742z" class="prefix__cls-3" data-name="빼기 10" transform="translate(1058 1077)"/>
+        </g>
+    </g>
+</svg>
diff --git a/src/assets/scss/_fonts.scss b/src/assets/scss/_fonts.scss
index 5b593af..ba6a03e 100644
--- a/src/assets/scss/_fonts.scss
+++ b/src/assets/scss/_fonts.scss
@@ -1,8 +1,8 @@
 @font-face {
   font-family: 'LG Smart Bold';
   font-display: swap;
-  src: local('☺'), url('assets/webfonts/LG_Smart_Bold.woff2') format('woff2'),
-    url('assets/webfonts/LG_Smart_Bold.woff') format('woff');
+  src: local('☺'), url('/assets/webfonts/LG_Smart_Bold.woff2') format('woff2'),
+    url('/assets/webfonts/LG_Smart_Bold.woff') format('woff');
   font-weight: normal;
   font-style: normal;
 }
@@ -10,24 +10,16 @@
   font-family: 'LG Smart Bold';
   font-display: swap;
   src: local('☺'),
-    url('assets/webfonts/LG_Smart_Bold_Italic.woff2') format('woff2'),
-    url('assets/webfonts/LG_Smart_Bold_Italic.woff') format('woff');
+    url('/assets/webfonts/LG_Smart_Bold_Italic.woff2') format('woff2'),
+    url('/assets/webfonts/LG_Smart_Bold_Italic.woff') format('woff');
   font-weight: normal;
   font-style: italic;
 }
 @font-face {
   font-family: 'LG Smart Light';
   font-display: swap;
-  src: local('☺'), url('assets/webfonts/LG_Smart_Light.woff2') format('woff2'),
-    url('assets/webfonts/LG_Smart_Light.woff') format('woff');
-  font-weight: normal;
-  font-style: normal;
-}
-@font-face {
-  font-family: 'LG Smart Regular';
-  font-display: swap;
-  src: local('☺'), url('assets/webfonts/LG_Smart_Regular.woff2') format('woff2'),
-    url('assets/webfonts/LG_Smart_Regular.woff') format('woff');
+  src: local('☺'), url('/assets/webfonts/LG_Smart_Light.woff2') format('woff2'),
+    url('/assets/webfonts/LG_Smart_Light.woff') format('woff');
   font-weight: normal;
   font-style: normal;
 }
@@ -35,8 +27,17 @@
   font-family: 'LG Smart Regular';
   font-display: swap;
   src: local('☺'),
-    url('assets/webfonts/LG_Smart_Regular_Italic.woff2') format('woff2'),
-    url('assets/webfonts/LG_Smart_Regular_Italic.woff') format('woff');
+    url('/assets/webfonts/LG_Smart_Regular.woff2') format('woff2'),
+    url('/assets/webfonts/LG_Smart_Regular.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'LG Smart Regular';
+  font-display: swap;
+  src: local('☺'),
+    url('/assets/webfonts/LG_Smart_Regular_Italic.woff2') format('woff2'),
+    url('/assets/webfonts/LG_Smart_Regular_Italic.woff') format('woff');
   font-weight: normal;
   font-style: italic;
 }
@@ -44,8 +45,8 @@
   font-family: 'LG Smart SemiBold';
   font-display: swap;
   src: local('☺'),
-    url('assets/webfonts/LG_Smart_SemiBold.woff2') format('woff2'),
-    url('assets/webfonts/LG_Smart_SemiBold.woff') format('woff');
+    url('/assets/webfonts/LG_Smart_SemiBold.woff2') format('woff2'),
+    url('/assets/webfonts/LG_Smart_SemiBold.woff') format('woff');
   font-weight: normal;
   font-style: normal;
 }
@@ -64,17 +65,18 @@
   font-family: 'Material Icons';
   font-style: normal;
   font-weight: 400;
-  src: url('assets/fonts/materialicons/materialicons-v52.woff2') format('woff2'),
-    url('assets/fonts/materialicons/materialicons-v52.woff') format('woff');
+  src: url('/assets/fonts/materialicons/materialicons-v52.woff2')
+      format('woff2'),
+    url('/assets/fonts/materialicons/materialicons-v52.woff') format('woff');
 }
 /* fallback */
 @font-face {
   font-family: 'Material Icons Outlined';
   font-style: normal;
   font-weight: 400;
-  src: url('assets/fonts/materialicons/materialiconsoutlined-v21.woff2')
+  src: url('/assets/fonts/materialicons/materialiconsoutlined-v21.woff2')
       format('woff2'),
-    url('assets/fonts/materialicons/materialiconsoutlined-v21.woff')
+    url('/assets/fonts/materialicons/materialiconsoutlined-v21.woff')
       format('woff');
 }
 /* fallback */
@@ -82,26 +84,28 @@
   font-family: 'Material Icons Round';
   font-style: normal;
   font-weight: 400;
-  src: url('assets/fonts/materialicons/materialiconsround-v21.woff2')
+  src: url('/assets/fonts/materialicons/materialiconsround-v21.woff2')
       format('woff2'),
-    url('assets/fonts/materialicons/materialiconsround-v21.woff') format('woff');
+    url('/assets/fonts/materialicons/materialiconsround-v21.woff')
+      format('woff');
 }
 /* fallback */
 @font-face {
   font-family: 'Material Icons Sharp';
   font-style: normal;
   font-weight: 400;
-  src: url('assets/fonts/materialicons/materialiconssharp-v22.woff2')
+  src: url('/assets/fonts/materialicons/materialiconssharp-v22.woff2')
       format('woff2'),
-    url('assets/fonts/materialicons/materialiconssharp-v22.woff') format('woff');
+    url('/assets/fonts/materialicons/materialiconssharp-v22.woff')
+      format('woff');
 }
 /* fallback */
 @font-face {
   font-family: 'Material Icons Two Tone';
   font-style: normal;
   font-weight: 400;
-  src: url('assets/fonts/materialicons/materialiconstwotone-v20.woff2')
+  src: url('/assets/fonts/materialicons/materialiconstwotone-v20.woff2')
       format('woff2'),
-    url('assets/fonts/materialicons/materialiconstwotone-v20.woff')
+    url('/assets/fonts/materialicons/materialiconstwotone-v20.woff')
       format('woff');
 }
diff --git a/src/assets/scss/global/_default.scss b/src/assets/scss/global/_default.scss
index 0a8a97e..4eb3b1a 100644
--- a/src/assets/scss/global/_default.scss
+++ b/src/assets/scss/global/_default.scss
@@ -139,6 +139,9 @@ body {
 //top toolbar
 .ucap-title-bar-container {
   display: flex;
+  @include screen(xs) {
+    background-color: rgba(129, 117, 122, 0.6) !important;
+  }
   .ucap-title-bar-controls {
     flex-grow: 0;
   }
@@ -149,19 +152,26 @@ body {
     padding-right: 10px;
     button {
       & + button {
-        margin-left: 6px !important;
+        margin-left: 4px !important;
       }
     }
     .ucap-title-bar-windows-button {
       width: 30px !important;
       height: 30px !important;
-      color: #999 !important;
+      color: #666 !important;
       opacity: 1 !important;
       cursor: pointer;
       svg {
         width: 12px;
         height: 12px;
       }
+      @include screen(xs) {
+        color: #fff !important;
+        svg {
+          fill: #fff;
+          color: #fff !important;
+        }
+      }
       &.ucap-title-bar-windows-button-minimize {
         &:hover {
           background-color: #ccc !important;
@@ -295,14 +305,14 @@ body {
         @include screen(mid) {
           flex-direction: column !important;
         }
-        @include screen(xl) {
+        /*@include screen(xl) {
           flex-direction: row !important;
-        }
+        }*/
       }
     }
   }
   .mat-icon-button {
-    color: #999;
+    color: #eee;
   }
 }
 .ucap-media-viewer-container {
@@ -336,6 +346,55 @@ body {
     }
   }
   .mat-icon-button {
-    color: #999;
+    color: #eee;
+  }
+}
+
+//no-sidenavi drag 영역
+.no-navi-top-bar {
+  .ucap-title-bar-container {
+    background-color: unset !important;
+    .ucap-title-bar-content-container {
+      -webkit-app-region: drag;
+      -webkit-touch-callout: none;
+      -webkit-user-select: none;
+    }
+    .ucap-title-bar-controls {
+      .ucap-title-bar-windows-button {
+        @include screen(xs) {
+          color: #666 !important;
+        }
+      }
+    }
+  }
+}
+
+.layer-information-frame {
+  border: 1px solid #fd78a1;
+  padding: 10px;
+  .mat-menu-content:not(:empty) {
+    padding: 0;
+    .info-header {
+      display: flex;
+      align-items: center;
+      border-bottom: 1px solid #ccc;
+      margin-bottom: 10px;
+      padding-bottom: 4px;
+      mat-icon {
+        font-size: 1.6em;
+        color: #e42f66;
+      }
+      .title {
+        color: #333333;
+        font-size: 1em;
+        font-weight: 600;
+        size: 18px;
+        margin-left: 8px;
+      }
+    }
+    .info-body {
+      font-size: 0.9em;
+      color: #999999;
+    }
   }
 }
diff --git a/src/assets/scss/global/_material-ui.scss b/src/assets/scss/global/_material-ui.scss
index 182d02e..a7c6ee6 100644
--- a/src/assets/scss/global/_material-ui.scss
+++ b/src/assets/scss/global/_material-ui.scss
@@ -52,7 +52,8 @@
           display: flex;
           flex-flow: column;
           justify-content: space-around;
-          height: 272px;
+          //height: 272px;
+          height: 200px;
           border-bottom: none;
 
           .mat-tab-label {
@@ -267,6 +268,9 @@
             }
           }
         }
+        .mat-form-field-suffix {
+          align-self: center;
+        }
       }
     }
   }
@@ -851,6 +855,12 @@
     }
   }
 
+  .ucap-select-placeholder-value {
+    .mat-select-placeholder {
+      color: rgba(0, 0, 0, 0.87) !important;
+    }
+  }
+
   // Mat Mixin background-color:$accent, 700, class name
   @include colorMix-background($accent, A200, '.bg-accent-a200');
   @include colorMix-background($warn, 50, '.bg-warn-chat', '.message-area');
@@ -963,7 +973,7 @@
           .mat-card-content {
             min-height: 50px;
             padding-left: 70px;
-            background-image: url(assets/images/ico/icon_alert_info_a50.svg);
+            background-image: url(/assets/images/ico/icon_alert_info_a50.svg);
             background-repeat: no-repeat;
           }
           .mat-card-actions {
@@ -973,4 +983,9 @@
       }
     }
   }
+  .mat-dialog-container {
+    @include screen(xs) {
+      border-radius: 0px;
+    }
+  }
 }
diff --git a/src/assets/scss/global/ucap/_call.scss b/src/assets/scss/global/ucap/_call.scss
index e69de29..2bb6f2e 100644
--- a/src/assets/scss/global/ucap/_call.scss
+++ b/src/assets/scss/global/ucap/_call.scss
@@ -0,0 +1,39 @@
+.select-call-section-content {
+  .mat-tab-group {
+    .mat-tab-header {
+    }
+    .mat-tab-body-wrapper {
+      //padding: 0 16px;
+      .mat-tab-body {
+        .mat-tab-body-content {
+          .ucap-group-expansion-container {
+            .ucap-virtual-scroll-viewport {
+            }
+          }
+          .select-tap {
+            .organization-tree-simple {
+              padding: 0 !important;
+              justify-content: center;
+            }
+          }
+          .profile-navigation-list {
+            height: 500px;
+          }
+
+          .history-expansion-container {
+            height: 500px;
+          }
+        }
+      }
+    }
+  }
+}
+
+.app-sections-call-info-container {
+  .app-call-time-line-container {
+    .ucap-call-timeline-item-list-container,
+    .ucap-call-timeline-item-list-01-container {
+      height: 500px !important;
+    }
+  }
+}
diff --git a/src/assets/scss/global/ucap/_chat.scss b/src/assets/scss/global/ucap/_chat.scss
index 00f5c81..dd385d1 100644
--- a/src/assets/scss/global/ucap/_chat.scss
+++ b/src/assets/scss/global/ucap/_chat.scss
@@ -323,6 +323,13 @@
     padding: 0 16px;
     .profile-list-container {
       padding-left: 5px;
+      .ucap-organization-profile-list-item-02-container {
+        .ucap-organization-profile-image-01-image-container {
+          img {
+            cursor: pointer;
+          }
+        }
+      }
     }
   }
 }
@@ -339,6 +346,7 @@
       flex-direction: column;
       justify-content: space-between;
       height: 100%;
+      min-width: 400px;
       app-group-select-user {
         flex: 1 1 auto;
         height: 100%;
@@ -755,7 +763,8 @@
 //Date splitter
 .ucap-chat-message-box-date-splitter {
   height: 30px;
-  margin: 20px 0;
+  /* margin: 20px 0; */
+  padding: 35px 0;
   &:before {
     content: '';
     height: 1px;
@@ -835,7 +844,7 @@
     display: flex;
     background-color: rgba(0, 0, 0, 0.6);
     cursor: default;
-    &:before {
+    /*&:before {
       content: '';
       width: 16px;
       height: 16px;
@@ -843,13 +852,14 @@
       top: calc(50% - 25px);
       background-color: $white;
       border-radius: 50%;
-    }
+    }*/
     &.over {
     }
     .btn-close {
       @include ucapMatButton(20px, 20px, 0, 20px);
       width: 20px;
       margin-bottom: 6px;
+      display: none;
     }
     .progress-info-area {
       color: $white;
@@ -858,7 +868,12 @@
       font-weight: 600;
     }
   }
-
+  .over {
+    visibility: hidden;
+    &:last-child {
+      visibility: visible;
+    }
+  }
   .desibled {
     .ucap-file-bubble {
       .ucap-chat-message-box-attach-file {
@@ -950,16 +965,16 @@
   }
   .contents {
     padding: 16px 16px 16px 42px;
-    font-size: 0.929em;
+    font-size: 1em;
     color: #333;
     line-height: 1.54;
     background-color: #fce7ed;
     @include wordBreak();
     .language {
-      padding: 3px 8px;
+      padding: 2px 8px;
       background-color: #e86773;
       border-radius: 2px;
-      font-size: 0.786em;
+      font-size: 0.9em;
       color: #fff;
       margin-right: 4px;
       line-height: 1.3;
@@ -1513,3 +1528,24 @@
     }
   }
 }
+
+.chat-form-area.ucap-mat-input-container {
+  .mat-form-field {
+    .mat-form-field-wrapper {
+      display: block;
+      .mat-form-field-infix {
+        display: block;
+      }
+    }
+  }
+}
+//sound-viewer palay시 애니메이션
+.ucap-sound-viewer-sound-icon {
+  .circle-box {
+    .sound-wave {
+      .sound-bar {
+        background-color: #666666;
+      }
+    }
+  }
+}
diff --git a/src/assets/scss/global/ucap/_dialog.scss b/src/assets/scss/global/ucap/_dialog.scss
index 3d2cd03..f25d394 100644
--- a/src/assets/scss/global/ucap/_dialog.scss
+++ b/src/assets/scss/global/ucap/_dialog.scss
@@ -1,17 +1,43 @@
 .dialog-container {
   width: 100%;
   height: 100%;
+  position: relative;
   .layout-container {
     .layout-header {
+      font-size: 1.3em !important;
       border-bottom: none !important;
       @include screen(xs) {
         margin: 0 !important;
       }
-      .sub-header-tit {
-        padding-left: 20px;
-        font-size: 1em;
-        color: #666;
-        font-weight: 400;
+      &-container {
+        div {
+          display: flex;
+          width: 100%;
+          justify-content: flex-start;
+          align-items: center;
+          .sub-header-tit {
+            display: inline-flex;
+            padding-left: 10px;
+            font-size: 0.9em;
+            color: #666;
+            font-weight: 400;
+            &::before {
+              @include wordBreak();
+              content: '-';
+              display: inline-block;
+              padding-right: 10px;
+            }
+          }
+          .btn-subject-info {
+            margin-left: auto;
+          }
+        }
+      }
+    }
+    .layout-body {
+      & > .ps__rail-x,
+      & > .ps__rail-y {
+        display: none;
       }
     }
   }
@@ -21,6 +47,7 @@
     @include screen(xs) {
       padding: $default-space 0;
     }
+
     .mat-stepper-horizontal {
       overflow: hidden;
       .mat-horizontal-stepper-header-container {
@@ -152,6 +179,16 @@
             background-color: #fff;
           }
         }
+        li {
+          .path {
+            .group-info {
+              overflow: hidden;
+              min-width: 0;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+          }
+        }
         .profile-list-container {
           &:hover {
             transition: all 0.2s;
@@ -163,6 +200,11 @@
         background-color: #f7f8fa !important;
         height: 100%;
       }
+      .ucap-virtual-scroll-viewport {
+        .ucap-virtual-scroll-content-wrapper {
+          width: 100%;
+        }
+      }
     }
   }
 }
@@ -249,7 +291,8 @@
 }
 
 //장문보기
-.ucap-dialog-chat-text-detail-container {
+.ucap-dialog-chat-text-detail-container,
+.ucap-dialog-profile-container {
   .layout-container {
     .layout-action {
       display: none !important;
@@ -318,3 +361,39 @@
     }
   }
 }
+
+//dialog-profile 스크롤 없이 보이기
+.dialog-body {
+  .ucap-organization-profile-01-container {
+    .profile-card-content {
+      padding: 4vh 8%;
+      .user-profile-info-area {
+        .user-info {
+          .nickname-area {
+            min-height: 40px;
+          }
+        }
+      }
+      .address-txt {
+        margin-top: 4vh;
+      }
+      .btn-link-area {
+        .btn-partner-set {
+          height: 80px;
+        }
+      }
+      .user-profile-info-list {
+        .btn-partner-set {
+          height: 9vh;
+          min-height: 80px;
+        }
+      }
+      .user-profile-info-list {
+        margin-top: 4vh;
+        ul {
+          height: 200px;
+        }
+      }
+    }
+  }
+}
diff --git a/src/assets/scss/global/ucap/_group.scss b/src/assets/scss/global/ucap/_group.scss
index 77eb312..bafca6a 100644
--- a/src/assets/scss/global/ucap/_group.scss
+++ b/src/assets/scss/global/ucap/_group.scss
@@ -40,13 +40,6 @@
     position: relative;
     .dialog-container {
       .form-eidt {
-        span {
-          .mat-hint {
-            position: absolute;
-            bottom: 4px;
-            right: 20px;
-          }
-        }
         .edit-actions {
           display: flex;
           .mat-icon-button {
diff --git a/src/assets/scss/global/ucap/_organization.scss b/src/assets/scss/global/ucap/_organization.scss
index 23e8b12..782fde3 100644
--- a/src/assets/scss/global/ucap/_organization.scss
+++ b/src/assets/scss/global/ucap/_organization.scss
@@ -72,12 +72,15 @@ ucap-organization-profile-image-01 {
     @include presence-state(10px);
   }
 }
-
+.ucap-organization-profile-image-01-container {
+  position: relative;
+}
 //avatar 01
 .ucap-organization-profile-image-01-image-container {
   @include avatar-img(36px, 0) {
     background-color: #ffe8cb;
   }
+  margin-left: 14px;
 }
 //avatar 02
 .ucap-organization-profile-image-02-image-container {
@@ -599,18 +602,21 @@ ucap-organization-profile-image-01 {
   }
   .user-profile-info-content {
     flex: 0 0 36%;
+    overflow: hidden;
     //padding-right: 10px;
     @include screen(xs) {
       padding-left: 16px;
       flex-basis: 88%;
     }
     .profile-image {
+      padding-right: 20px;
       height: 38px !important;
       img {
         @extend %ucapCursorPointer;
       }
     }
     .user-info {
+      width: calc(100% - 80px);
       .user-n-g {
         .user-name {
         }
@@ -618,6 +624,7 @@ ucap-organization-profile-image-01 {
         }
       }
       .dept-name {
+        width: 100%;
       }
     }
   }
@@ -682,6 +689,9 @@ ucap-organization-profile-image-01 {
     visibility: hidden;
     button {
       margin: 0 -4.5px;
+      &[ng-reflect-disabled='true'] {
+        opacity: 0.5;
+      }
       img {
         width: 24px;
       }
@@ -852,17 +862,34 @@ ucap-organization-profile-image-01 {
     bottom: 0;
     height: 59px;
     background-color: rgba(255, 255, 255, 0.8);
-    display: flex;
+    /*display: flex;
     flex-direction: row;
     align-items: center;
     flex-flow: nowrap;
-    padding: 0 12px 0 10px;
+    padding: 0 12px 0 10px;*/
     border-radius: 35px 0 0 34px;
     visibility: hidden;
-    button {
-      margin: 0 -4.5px;
-      img {
-        width: 24px;
+    .ucap-organization-profile-menu-02-container {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      flex-flow: nowrap;
+      padding: 0 12px 0 10px;
+      button {
+        margin: 0 -4.5px;
+        &[ng-reflect-disabled='true'] {
+          opacity: 0.5;
+        }
+        img {
+          width: 24px;
+        }
+      }
+      .divider {
+        margin: 0 4px 0 5px;
+        width: 1px;
+        height: 15px;
+        display: inline-block;
+        background-color: #ccc;
       }
     }
     &.visible-profile-menu {
@@ -899,7 +926,9 @@ ucap-organization-profile-image-01 {
   .mat-tree {
     .mat-tree-node {
       li {
+        position: absolute;
         width: 100%;
+        height: 100%;
         &:hover {
           .profile-list-container {
             background-color: #f7f8fa;
@@ -1034,7 +1063,7 @@ ucap-organization-profile-image-01 {
   .search-container {
     padding: 0 30px 10px !important;
     @include screen(xs) {
-      padding: 0 16px 10px !important;
+      padding: 10px 16px 0 !important;
     }
   }
 }
@@ -1061,7 +1090,7 @@ ucap-organization-profile-image-01 {
 .my-profile {
   cursor: pointer;
   .ucap-organization-profile-image-01-container {
-    height: 30px;
+    height: 28px;
     span {
       position: relative;
       align-self: flex-end;
@@ -1071,8 +1100,9 @@ ucap-organization-profile-image-01 {
       height: 10px !important;
     }
     .ucap-organization-profile-image-01-image-container {
-      @include avatar-img(30px, 0) {
+      @include avatar-img(28px, 0) {
         background-color: #d1f6ff;
+        border: 1px solid rgba(255, 255, 255, 0.6);
       }
     }
     &::after {
diff --git a/src/assets/scss/mixins/_ucap-organization.scss b/src/assets/scss/mixins/_ucap-organization.scss
index 6c45364..95ae1da 100644
--- a/src/assets/scss/mixins/_ucap-organization.scss
+++ b/src/assets/scss/mixins/_ucap-organization.scss
@@ -9,6 +9,7 @@
   transform: none;
   margin: 0;
   @extend %blind;
+  position: absolute;
   //&.offline {
   //  background-color: $gray-rec;
   //}
@@ -61,8 +62,8 @@
         //position: absolute;
         //bottom: 0;
         //right: 0;
-        align-self: flex-end;
         margin-left: -10px;
+        align-self: flex-end;
       }
     }
   }
diff --git a/src/environments/environment.hmr.ts b/src/environments/environment.hmr.ts
index b38b0bc..f447867 100644
--- a/src/environments/environment.hmr.ts
+++ b/src/environments/environment.hmr.ts
@@ -1,4 +1,8 @@
-import { DeviceType, DesktopType, NotificationMethod } from '@ucap/core';
+import {
+  DeviceType,
+  DesktopType,
+  NotificationMethod
+} from '@ucap/domain-common';
 import { NativeService, I18NEXT } from './native/native';
 
 import {
@@ -11,6 +15,8 @@ import {
   protocolUrls,
   messageApiUrls,
   promptUrls,
+  webexUrls,
+  contactApiUrls,
   commonApiAcceptableFileExtensionsForImage,
   commonApiAcceptableFileExtensionsForVideo
 } from './environment.type';
@@ -23,6 +29,10 @@ export const environment: Environment = {
     productId: 'PRO_000482',
     productName: 'MMessenger',
     localEncriptionKey: '!@#$LG%^&*',
+    windowSizeMode: {
+      narrow: 780,
+      normal: 1024
+    },
     nativeServiceClass: NativeService,
     i18next: {
       options: {
@@ -116,6 +126,9 @@ export const environment: Environment = {
       readHereShowMinimumEventCount: 10,
       readHereShowMaximumEventCount: 100,
       readHereEventRequestCount: 10
+    },
+    call: {
+      historyRequestDefaultCount: 200
     }
   },
 
@@ -154,6 +167,15 @@ export const environment: Environment = {
     urls: externalApiUrls
   },
 
+  contactApiModuleConfig: {
+    hostConfig: {
+      protocol: 'http',
+      domain: '13.124.88.127',
+      port: 8011
+    },
+    urls: contactApiUrls
+  },
+
   messageApiModuleConfig: {
     hostConfig: {
       protocol: 'http',
@@ -172,6 +194,15 @@ export const environment: Environment = {
     urls: promptUrls
   },
 
+  webexApiModuleConfig: {
+    hostConfig: {
+      protocol: 'http',
+      domain: '13.124.88.127',
+      port: 9098
+    },
+    urls: webexUrls
+  },
+
   piModuleConfig: {
     hostConfig: {
       protocol: 'http',
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
index 94bb8bb..dc5e306 100644
--- a/src/environments/environment.prod.ts
+++ b/src/environments/environment.prod.ts
@@ -1,4 +1,8 @@
-import { DeviceType, DesktopType, NotificationMethod } from '@ucap/core';
+import {
+  DeviceType,
+  DesktopType,
+  NotificationMethod
+} from '@ucap/domain-common';
 import { NativeService, I18NEXT } from './native/native';
 
 import {
@@ -7,12 +11,14 @@ import {
   commonApiacceptableFileExtensions,
   publicApiUrls,
   externalApiUrls,
+  contactApiUrls,
   piUrls,
   protocolUrls,
   messageApiUrls,
   promptUrls,
   commonApiAcceptableFileExtensionsForImage,
-  commonApiAcceptableFileExtensionsForVideo
+  commonApiAcceptableFileExtensionsForVideo,
+  webexUrls
 } from './environment.type';
 
 export const environment: Environment = {
@@ -23,6 +29,10 @@ export const environment: Environment = {
     productId: 'PRO_000482',
     productName: 'MMessenger',
     localEncriptionKey: '!@#$LG%^&*',
+    windowSizeMode: {
+      narrow: 780,
+      normal: 1024
+    },
     nativeServiceClass: NativeService,
     i18next: {
       options: {
@@ -116,6 +126,9 @@ export const environment: Environment = {
       readHereShowMinimumEventCount: 10,
       readHereShowMaximumEventCount: 100,
       readHereEventRequestCount: 10
+    },
+    call: {
+      historyRequestDefaultCount: 200
     }
   },
 
@@ -154,6 +167,15 @@ export const environment: Environment = {
     urls: externalApiUrls
   },
 
+  contactApiModuleConfig: {
+    hostConfig: {
+      protocol: 'http',
+      domain: '13.124.88.127',
+      port: 8011
+    },
+    urls: contactApiUrls
+  },
+
   messageApiModuleConfig: {
     hostConfig: {
       protocol: 'http',
@@ -172,6 +194,15 @@ export const environment: Environment = {
     urls: promptUrls
   },
 
+  webexApiModuleConfig: {
+    hostConfig: {
+      protocol: 'http',
+      domain: '13.124.88.127',
+      port: 9098
+    },
+    urls: webexUrls
+  },
+
   piModuleConfig: {
     hostConfig: {
       protocol: 'http',
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index 9c93591..72ca5a7 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -1,7 +1,11 @@
 // This file can be replaced during build by using the `fileReplacements` array.
 // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
 // The list of file replacements can be found in `angular.json`.
-import { DeviceType, DesktopType, NotificationMethod } from '@ucap/core';
+import {
+  DeviceType,
+  DesktopType,
+  NotificationMethod
+} from '@ucap/domain-common';
 import { NativeService, I18NEXT } from './native/native';
 
 import {
@@ -10,12 +14,14 @@ import {
   commonApiacceptableFileExtensions,
   publicApiUrls,
   externalApiUrls,
+  contactApiUrls,
   piUrls,
   protocolUrls,
   messageApiUrls,
   promptUrls,
   commonApiAcceptableFileExtensionsForImage,
-  commonApiAcceptableFileExtensionsForVideo
+  commonApiAcceptableFileExtensionsForVideo,
+  webexUrls
 } from './environment.type';
 
 export const environment: Environment = {
@@ -26,6 +32,10 @@ export const environment: Environment = {
     productId: 'PRO_000482',
     productName: 'MMessenger',
     localEncriptionKey: '!@#$LG%^&*',
+    windowSizeMode: {
+      narrow: 780,
+      normal: 1024
+    },
     nativeServiceClass: NativeService,
     i18next: {
       options: {
@@ -119,6 +129,9 @@ export const environment: Environment = {
       readHereShowMinimumEventCount: 10,
       readHereShowMaximumEventCount: 100,
       readHereEventRequestCount: 10
+    },
+    call: {
+      historyRequestDefaultCount: 200
     }
   },
 
@@ -157,6 +170,15 @@ export const environment: Environment = {
     urls: externalApiUrls
   },
 
+  contactApiModuleConfig: {
+    hostConfig: {
+      protocol: 'http',
+      domain: '13.124.88.127',
+      port: 8011
+    },
+    urls: contactApiUrls
+  },
+
   messageApiModuleConfig: {
     hostConfig: {
       protocol: 'http',
@@ -175,6 +197,15 @@ export const environment: Environment = {
     urls: promptUrls
   },
 
+  webexApiModuleConfig: {
+    hostConfig: {
+      protocol: 'http',
+      domain: '13.124.88.127',
+      port: 9098
+    },
+    urls: webexUrls
+  },
+
   piModuleConfig: {
     hostConfig: {
       protocol: 'http',
diff --git a/src/environments/environment.type.ts b/src/environments/environment.type.ts
index b079b1e..a927b71 100644
--- a/src/environments/environment.type.ts
+++ b/src/environments/environment.type.ts
@@ -1,6 +1,6 @@
 import { Type } from '@angular/core';
 
-import { DeviceType, DesktopType } from '@ucap/core';
+import { DeviceType, DesktopType } from '@ucap/domain-common';
 
 import { ModuleConfig as WebSocketModuleConfig } from '@ucap/web-socket';
 
@@ -29,6 +29,16 @@ import {
   Urls as PromptUrls
 } from '@ucap/api-prompt';
 
+import {
+  ModuleConfig as WebexApiModuleConfig,
+  Urls as WebexUrls
+} from '@ucap/api-webex';
+
+import {
+  ModuleConfig as ContactApiModuleConfig,
+  Urls as ContactApiUrls
+} from '@ucap/api-contact';
+
 import { ModuleConfig as PiModuleConfig, Urls as PiUrls } from '@ucap/pi';
 
 import {
@@ -48,6 +58,10 @@ export interface Environment {
     productId: string;
     productName: string;
     localEncriptionKey: string;
+    windowSizeMode: {
+      narrow: number;
+      normal: number;
+    };
     nativeServiceClass: Type<any>;
     i18next: {
       options: {
@@ -120,6 +134,10 @@ export interface Environment {
       /** 여기까지 읽음이 보여질때 대화방 이벤트 조회 개수. */
       readHereEventRequestCount: number;
     };
+    call: {
+      /** 통화이력 조회 개수 */
+      historyRequestDefaultCount: number;
+    };
   };
 
   companyConfig: {
@@ -132,6 +150,8 @@ export interface Environment {
   externalApiModuleConfig: ExternalApiModuleConfig;
   messageApiModuleConfig: MessageApiModuleConfig;
   promptApiModuleConfig: PromptApiModuleConfig;
+  webexApiModuleConfig: WebexApiModuleConfig;
+  contactApiModuleConfig: ContactApiModuleConfig;
   piModuleConfig: PiModuleConfig;
   webSocketModuleConfig: WebSocketModuleConfig;
   protocolModuleConfig: ProtocolModuleConfig;
@@ -191,7 +211,19 @@ export const messageApiUrls: MessageApiUrls = {
   retrieveUnreadCount: '/uCapMsg/msg/retrieveUnreadCount.do',
 
   retrieveNoticeList: '/uCapMsg/notice/retrieveNoticeList.do',
-  eventDownload: ''
+  eventDownload: '',
+
+  sendClickToCall: '/uCapMsg/clicktocall/call'
+};
+
+export const webexUrls: WebexUrls = {
+  conferenceCreate: '/uCapWebex/webex/direct',
+  conferenceJoin: '/uCapWebex/webex/join'
+};
+
+export const contactApiUrls: ContactApiUrls = {
+  retrieveCallHistory: '/Contact/RetrieveCallHistory.aspx',
+  deleteCallHistory: '/Contact/DeleteCallHistory.aspx'
 };
 
 export const promptUrls: PromptUrls = {
diff --git a/src/favicon.ico b/src/favicon.ico
index 997406ad22c29aae95893fb3d666c30258a09537..8af2432e478284624daf3f5c329f97f22b95e28f 100644
GIT binary patch
literal 109473
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
WcXsnC&Hye3WAJqKb6Mw<&;$Tz-HmGi

literal 948
zcmV;l155mgP)<h;3K|Lk000e1NJLTq000~S0015c1^@s6KgE8Z00009a7bBm000XT
z000XT0n*)m`~Uz0W=TXrR7i=HS4&J2Q53!N>CBYU7IjCFmI-B}4sMJt3^s9NVg!P0
z6hDQy(L`XWMkB@zOLgN$4KYz;j0zZxq9KKdpZE#5@k0crP^5f9KO};h)ZDQ%ybhht
z%t<DF^WJ^$%)N8(nOiE8$$(XeL8%@9luMqDd3cT+XIb_^YH{kU)iX>9#h|nu0K(bJ
ztIkhEr!*UyrZWQ1k2+YkGqDi8Z<|mIN&$kzpKl{cNP=OQzXHz>vn+c)F)zO|Bou>E
z2|-d_=qY#Y+yOu1a}XI?cU}%04)zz%anD(XZC{#~WreV!a$7k2Ug`?&CUEc0EtrkZ
zL49MB)h!_K{H(*l_93D5tO0;BUnvYlo+;yss%n^&qjt6fZOa+}+FDO(<Bkhw>~2>G
z2dx@=JZ?DHP^;b7*Y1as5^uphBsh*s*z&MBd?e@I>-9kU>63PjP&^#5YTOb&x^6Cf
z?674rmSHB5Fk!{Gv7rv!?qX#ei_L(XtwVqLX3L}$MI|kJ*w(rhx~tc&L&xP#?cQow
zX_|gx$wMr3pRZIIr_;;O|8fAjd;1`nOeu5K(pCu7>^3E&D2OBBq?sY<UH^*#NTt${
zNF)_f745C&UQ!hOL6J5wC>a(%S?GwG&_0-s%_v$L@R!5H_fc)lOb9ZoOO#p`Nn`KU
z3LTTBtjwo`7(<AJG9luHgaE%Npo+H`lp+AIM{k6MKJszc@DM%lod&8TCER*o(XXcC
z8&nVTCXT+)%}_`PXo^}PJ?sF0i+ZEcPp`Gw`||ahk}N7#R#vq!${S`X0z(`KO6v$+
zMMZ<lOR*4Z^w4CXBMvpS<Pee{U^01BA?Uh&H@~OZ--v#JEQN=UdUMG1z|8D<@>HA6
z7gmO$yTR!5L>Bsg!X8616{JUngg_<CkvB3~uoT|Ddv8jJB0!diUI=K4ehj*vX2h(Q
zAz{=+<pcIMznABWNDpCr>@&85%>W=<KFI{w!MTfFH&rswzr*pd&s_k3#Fq-Gj~P%^
zungQTS7mB(`UGii*a&Ca#w!4DJm0!eNS%W4gXg%tYFns>mChTR;x4`P=?PJ~oPuy5
zU-L`C@_!34D21{fD~Y8NVnR3t;aqZI3fIhmgmx}$oc-dKDC6Ap$Gy>a!`A*x2L1v0
WcZ@i?LyX}70000<MNUMnLSTXxWwRmx

diff --git a/src/index.html b/src/index.html
index a06b14a..4e671e9 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>MMessengerLg</title>
+    <title>M Messenger</title>
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
@@ -12,8 +12,8 @@
         font-family: 'LG Smart SemiBold';
         font-display: swap;
         src: local('☺'),
-          url('/assets/webfonts/LG_Smart_SemiBold.woff2') format('woff2'),
-          url('/assets/webfonts/LG_Smart_SemiBold.woff') format('woff');
+          url('assets/webfonts/LG_Smart_SemiBold.woff2') format('woff2'),
+          url('assets/webfonts/LG_Smart_SemiBold.woff') format('woff');
         font-weight: normal;
         font-style: normal;
       }
@@ -23,7 +23,9 @@
         padding: 0;
       }
 
-      #ucap-lg-web-preloader {
+      #ucap-lg-web-splash {
+        z-index: 100000;
+        position: absolute;
         text-align: center;
         display: flex;
         flex-direction: row;
@@ -340,7 +342,7 @@
     </style>
   </head>
   <body class="theme-lfRed">
-    <div id="ucap-lg-web-preloader">
+    <ucap-splash-screen id="ucap-lg-web-splash">
       <div class="loding-set">
         <svg
           class="ucap-bubble-gray"
@@ -466,7 +468,7 @@
         </svg>
       </div>
       <p class="messenger-copy">Welcome to Messenger</p>
-    </div>
+    </ucap-splash-screen>
     <app-root></app-root>
   </body>
 </html>