From d47dd78e4bb25654997c9ef10cde5d05d0de0281 Mon Sep 17 00:00:00 2001
From: Richard Park <crusader@loafle.com>
Date: Mon, 13 Jan 2020 13:55:54 +0900
Subject: [PATCH 01/10] zooming is implemented

---
 .../ucap-webmessenger-electron/src/index.ts   |  3 +-
 .../native/components/top-bar.component.html  | 21 +++--
 .../native/components/top-bar.component.ts    | 45 +++++++++--
 .../components/main.page.component.ts         |  4 +-
 .../src/app/resolvers/messenger.resolver.ts   |  1 +
 .../app/services/authentication.service.ts    |  1 +
 .../src/app/store/messenger/status/state.ts   |  7 +-
 .../src/app/store/setting/index.ts            | 11 ++-
 .../src/app/store/setting/init/effects.ts     |  1 +
 .../src/app/store/setting/native/actions.ts   | 17 ++++
 .../src/app/store/setting/native/effects.ts   | 77 +++++++++++++++++++
 .../src/app/store/setting/native/index.ts     |  4 +
 .../src/app/store/setting/native/reducers.ts  | 13 ++++
 .../src/app/store/setting/native/state.ts     | 16 ++++
 .../src/app/types/app-user-info.type.ts       |  1 +
 .../lib/services/browser-native.service.ts    |  6 ++
 .../lib/services/electron-native.service.ts   | 15 +++-
 .../src/lib/services/native.service.ts        |  1 +
 .../src/lib/components/chat.component.html    |  4 +-
 .../inline-edit-input.component.html          | 25 ++++++
 .../inline-edit-input.component.scss          |  7 ++
 .../inline-edit-input.component.spec.ts       | 25 ++++++
 .../components/inline-edit-input.component.ts | 33 ++++++++
 .../src/lib/ucap-ui.module.ts                 |  2 +
 .../ucap-webmessenger-ui/src/public-api.ts    |  1 +
 25 files changed, 312 insertions(+), 29 deletions(-)
 create mode 100644 projects/ucap-webmessenger-app/src/app/store/setting/native/actions.ts
 create mode 100644 projects/ucap-webmessenger-app/src/app/store/setting/native/effects.ts
 create mode 100644 projects/ucap-webmessenger-app/src/app/store/setting/native/index.ts
 create mode 100644 projects/ucap-webmessenger-app/src/app/store/setting/native/reducers.ts
 create mode 100644 projects/ucap-webmessenger-app/src/app/store/setting/native/state.ts
 create mode 100644 projects/ucap-webmessenger-ui/src/lib/components/inline-edit-input.component.html
 create mode 100644 projects/ucap-webmessenger-ui/src/lib/components/inline-edit-input.component.scss
 create mode 100644 projects/ucap-webmessenger-ui/src/lib/components/inline-edit-input.component.spec.ts
 create mode 100644 projects/ucap-webmessenger-ui/src/lib/components/inline-edit-input.component.ts

diff --git a/electron-projects/ucap-webmessenger-electron/src/index.ts b/electron-projects/ucap-webmessenger-electron/src/index.ts
index a825c3e7..ca04b864 100644
--- a/electron-projects/ucap-webmessenger-electron/src/index.ts
+++ b/electron-projects/ucap-webmessenger-electron/src/index.ts
@@ -5,7 +5,8 @@ import {
   Tray,
   Menu,
   shell,
-  dialog
+  dialog,
+  webFrame
 } from 'electron';
 import path from 'path';
 import fse from 'fs-extra';
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
index 6195f3e7..62a1a776 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
@@ -274,14 +274,14 @@
       {{ 'profile.open' | translate }}
     </button>
   </div>
-  <!-- <div class="setting">
+  <div class="setting">
     <button
       mat-menu-item
       class="zoom minus-square"
       (click)="onClickZoomOut($event)"
     >
       축소</button
-    ><span class="set-size">100%</span
+    ><span class="set-size" (click)="onClickZoomLabel($event)">{{ zoom }}%</span
     ><button
       mat-menu-item
       class="zoom plus-square"
@@ -289,7 +289,7 @@
     >
       확대
     </button>
-  </div> -->
+  </div>
   <div class="setting">
     <button mat-menu-item (click)="onClickNotice()">
       {{ 'notice.label' | translate }}
@@ -334,13 +334,20 @@
   <div class="setting">
     <button mat-menu-item (click)="onClickStatusBusy($event, 1)">
       <span class="presence pcOther"> </span>
-      {{ loginRes?.statusMessage1 }}
+      <ucap-inline-edit-input
+        #statusMessage1
+        (click)="$event.stopPropagation()"
+      >
+        <span ucapInlineEditInput="view">{{ loginRes?.statusMessage1 }}</span>
+        <span ucapInlineEditInput="edit"><input matInput type="text"/></span>
+      </ucap-inline-edit-input>
+      <!-- {{ loginRes?.statusMessage1 }} -->
     </button>
-    <button
+    <!-- <button
       mat-menu-item
       class="edit"
-      (click)="onClickChangeStatusBusy($event, 1)"
-    ></button>
+      (click)="$event.stopPropagation(); statusMessage1.editMode = true"
+    ></button> -->
   </div>
   <div class="setting">
     <button mat-menu-item (click)="onClickStatusBusy($event, 2)">
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.ts
index d2bb2e86..253bb848 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.ts
@@ -20,6 +20,7 @@ import * as ChatStore from '@app/store/messenger/chat';
 import * as AuthenticationStore from '@app/store/account/authentication';
 import * as SettingsStore from '@app/store/messenger/settings';
 import * as UpdateStore from '@app/store/setting/update';
+import * as SettingNativeStore from '@app/store/setting/native';
 import * as StatusStore from '@app/store/messenger/status';
 
 import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
@@ -60,6 +61,8 @@ import { MatMenu, MatRadioChange } from '@angular/material';
 import { StatusCode, StatusType } from '@ucap-webmessenger/core';
 import { StatusInfo } from '@ucap-webmessenger/protocol-status';
 
+const zoomFactors = [60, 70, 85, 100, 120, 145, 170, 200];
+
 @Component({
   selector: 'app-layout-native-top-bar',
   templateUrl: './top-bar.component.html',
@@ -81,6 +84,9 @@ export class TopBarComponent implements OnInit, OnDestroy {
   myIdleCheckTime: number;
   myIdleCheckTimeSubscription: Subscription;
 
+  zoom: number;
+  zoomSubscription: Subscription;
+
   loginInfo: LoginInfo;
   weblink: WebLink[] = [];
   webLinkBadgeMail = 0;
@@ -129,24 +135,35 @@ export class TopBarComponent implements OnInit, OnDestroy {
       .subscribe();
 
     this.myStatusSubscription = this.store
-      .pipe(select(AppStore.MessengerSelector.StatusSelector.selectedMyStatus))
+      .pipe(select(AppStore.MessengerSelector.StatusSelector.selectMyStatus))
       .subscribe(myStatus => {
         this.myStatus = myStatus;
       });
 
     this.myIdleCheckTimeSubscription = this.store
       .pipe(
-        select(
-          AppStore.MessengerSelector.StatusSelector.selectedMyIdleCheckTime
-        )
+        select(AppStore.MessengerSelector.StatusSelector.selectMyIdleCheckTime)
       )
       .subscribe(myIdleCheckTime => {
         this.myIdleCheckTime = myIdleCheckTime;
       });
 
+    this.zoomSubscription = this.store
+      .pipe(select(AppStore.SettingSelector.NativeSelector.selectZoom))
+      .subscribe(zoom => {
+        this.zoom = zoom;
+      });
+
     this.updateInfo$ = this.store.pipe(
       select(AppStore.SettingSelector.UpdateSelector.updateInfo)
     );
+
+    const appUserInfo = this.localStorageService.encGet<AppUserInfo>(
+      KEY_APP_USER_INFO,
+      environment.customConfig.appKey
+    );
+
+    this.zoom = appUserInfo.zoom;
   }
 
   ngOnDestroy(): void {
@@ -361,15 +378,27 @@ export class TopBarComponent implements OnInit, OnDestroy {
   }
 
   onClickZoomOut(event: Event) {
-    event.stopPropagation();
+    const i = zoomFactors.indexOf(this.zoom);
+    if (-1 === i || 0 === i) {
+      return;
+    }
 
-    this.document.body.style.zoom = '80%';
+    const zoom = zoomFactors[i - 1];
+    this.store.dispatch(SettingNativeStore.changeZoom({ zoom }));
+  }
+
+  onClickZoomLabel(event: Event) {
+    this.store.dispatch(SettingNativeStore.changeZoom({ zoom: 100 }));
   }
 
   onClickZoomIn(event: Event) {
-    event.stopPropagation();
+    const i = zoomFactors.indexOf(this.zoom);
+    if (-1 === i || zoomFactors.length - 1 === i) {
+      return;
+    }
 
-    this.document.body.style.zoom = '120%';
+    const zoom = zoomFactors[i + 1];
+    this.store.dispatch(SettingNativeStore.changeZoom({ zoom }));
   }
 
   onClickRemoteSupport(event: Event) {
diff --git a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.ts b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.ts
index 4d500e43..43f56a85 100644
--- a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.ts
@@ -137,9 +137,7 @@ export class MainPageComponent implements OnInit, OnDestroy {
 
     this.myIdleCheckTimeSubscription = this.store
       .pipe(
-        select(
-          AppStore.MessengerSelector.StatusSelector.selectedMyIdleCheckTime
-        )
+        select(AppStore.MessengerSelector.StatusSelector.selectMyIdleCheckTime)
       )
       .subscribe(checkTime => {
         this.nativeService.changeLimitOfIdleState(checkTime);
diff --git a/projects/ucap-webmessenger-app/src/app/resolvers/messenger.resolver.ts b/projects/ucap-webmessenger-app/src/app/resolvers/messenger.resolver.ts
index d49e397d..81674ec1 100644
--- a/projects/ucap-webmessenger-app/src/app/resolvers/messenger.resolver.ts
+++ b/projects/ucap-webmessenger-app/src/app/resolvers/messenger.resolver.ts
@@ -58,6 +58,7 @@ import * as OptionStore from '@app/store/messenger/option';
 import * as QueryStore from '@app/store/messenger/query';
 import * as SyncStore from '@app/store/messenger/sync';
 import * as StatusStore from '@app/store/messenger/status';
+import * as SettingInitStore from '@app/store/setting/init';
 import { KEY_LOGIN_RES_INFO, KEY_VER_INFO } from '@app/types';
 
 import { environment } from '../../environments/environment';
diff --git a/projects/ucap-webmessenger-app/src/app/services/authentication.service.ts b/projects/ucap-webmessenger-app/src/app/services/authentication.service.ts
index 144603f4..5a042acf 100644
--- a/projects/ucap-webmessenger-app/src/app/services/authentication.service.ts
+++ b/projects/ucap-webmessenger-app/src/app/services/authentication.service.ts
@@ -66,6 +66,7 @@ export class AppAuthenticationService {
     if (!appUserInfo) {
       appUserInfo = {
         idleCheckTime: 10,
+        zoom: 100,
         settings: {
           ...environment.productConfig.defaultSettings,
           chat: {
diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/status/state.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/status/state.ts
index 7e25c0ed..92b7d306 100644
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/status/state.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/status/state.ts
@@ -62,11 +62,8 @@ export function selectors<S>(selector: Selector<any, State>) {
         ngeSelectEntitiesStatusBulkInfo,
         (_, entities) => (!!entities ? entities[userSeq] : undefined)
       ),
-    selectedMyStatus: createSelector(
-      selector,
-      (state: State) => state.myStatus
-    ),
-    selectedMyIdleCheckTime: createSelector(
+    selectMyStatus: createSelector(selector, (state: State) => state.myStatus),
+    selectMyIdleCheckTime: createSelector(
       selector,
       (state: State) => state.myIdleCheckTime
     )
diff --git a/projects/ucap-webmessenger-app/src/app/store/setting/index.ts b/projects/ucap-webmessenger-app/src/app/store/setting/index.ts
index 35df6196..3c8fc101 100644
--- a/projects/ucap-webmessenger-app/src/app/store/setting/index.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/setting/index.ts
@@ -5,19 +5,22 @@ import * as CompanyStore from './company';
 import * as InitStore from './init';
 import * as VersionInfoStore from './version-info';
 import * as UpdateStore from './update';
+import * as NativeStore from './native';
 
 export interface State {
   company: CompanyStore.State;
   init: InitStore.State;
   versionInfo: VersionInfoStore.State;
   update: UpdateStore.State;
+  native: NativeStore.State;
 }
 
 export const effects: Type<any>[] = [
   CompanyStore.Effects,
   InitStore.Effects,
   VersionInfoStore.Effects,
-  UpdateStore.Effects
+  UpdateStore.Effects,
+  NativeStore.Effects
 ];
 
 export function reducers(state: State | undefined, action: Action) {
@@ -25,7 +28,8 @@ export function reducers(state: State | undefined, action: Action) {
     company: CompanyStore.reducer,
     init: InitStore.reducer,
     versionInfo: VersionInfoStore.reducer,
-    update: UpdateStore.reducer
+    update: UpdateStore.reducer,
+    native: NativeStore.reducer
   })(state, action);
 }
 
@@ -42,6 +46,9 @@ export function selectors<S>(selector: Selector<any, State>) {
     ),
     UpdateSelector: UpdateStore.selectors(
       createSelector(selector, (state: State) => state.update)
+    ),
+    NativeSelector: NativeStore.selectors(
+      createSelector(selector, (state: State) => state.native)
     )
   };
 }
diff --git a/projects/ucap-webmessenger-app/src/app/store/setting/init/effects.ts b/projects/ucap-webmessenger-app/src/app/store/setting/init/effects.ts
index ec81eb8d..bbc822f0 100644
--- a/projects/ucap-webmessenger-app/src/app/store/setting/init/effects.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/setting/init/effects.ts
@@ -36,6 +36,7 @@ export class Effects {
       ),
     { dispatch: false }
   );
+
   constructor(
     private actions$: Actions,
     private translateService: TranslateService,
diff --git a/projects/ucap-webmessenger-app/src/app/store/setting/native/actions.ts b/projects/ucap-webmessenger-app/src/app/store/setting/native/actions.ts
new file mode 100644
index 00000000..54659aad
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/store/setting/native/actions.ts
@@ -0,0 +1,17 @@
+import { createAction, props } from '@ngrx/store';
+
+export const changeZoom = createAction(
+  '[Setting::Native] Change Zoom',
+  props<{ zoom: number }>()
+);
+
+export const changeZoomSuccess = createAction(
+  '[Setting::Native] changeZoom Success',
+  props<{
+    zoom: number;
+  }>()
+);
+export const changeZoomFailure = createAction(
+  '[Setting::Native] changeZoom Failure',
+  props<{ error: any }>()
+);
diff --git a/projects/ucap-webmessenger-app/src/app/store/setting/native/effects.ts b/projects/ucap-webmessenger-app/src/app/store/setting/native/effects.ts
new file mode 100644
index 00000000..cd60092c
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/store/setting/native/effects.ts
@@ -0,0 +1,77 @@
+import { Injectable, Inject } from '@angular/core';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+
+import { map, tap } from 'rxjs/operators';
+import { TranslateService } from '@ngx-translate/core';
+
+import { TranslateService as UCapTranslateService } from '@ucap-webmessenger/ui';
+import { DateService as UCapDateService } from '@ucap-webmessenger/ui';
+
+import * as AuthenticationStore from '@app/store/account/authentication';
+import { LocalStorageService } from '@ucap-webmessenger/web-storage';
+import { AppUserInfo, KEY_APP_USER_INFO } from '@app/types/app-user-info.type';
+
+import { environment } from '../../../../environments/environment';
+import { changeZoom, changeZoomSuccess, changeZoomFailure } from './actions';
+import { UCAP_NATIVE_SERVICE, NativeService } from '@ucap-webmessenger/native';
+import { Store } from '@ngrx/store';
+
+@Injectable()
+export class Effects {
+  postLogin$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType(AuthenticationStore.postLogin),
+        map(action => action.loginRes),
+        tap(async loginRes => {
+          const appUserInfo = this.localStorageService.encGet<AppUserInfo>(
+            KEY_APP_USER_INFO,
+            environment.customConfig.appKey
+          );
+
+          this.store.dispatch(changeZoom({ zoom: appUserInfo.zoom }));
+        })
+      ),
+    { dispatch: false }
+  );
+
+  changeZoom$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType(changeZoom),
+        map(action => action.zoom),
+        tap(zoom => {
+          const appUserInfo = this.localStorageService.encGet<AppUserInfo>(
+            KEY_APP_USER_INFO,
+            environment.customConfig.appKey
+          );
+
+          this.nativeService
+            .zoomTo(zoom)
+            .then(f => {
+              this.localStorageService.encSet<AppUserInfo>(
+                KEY_APP_USER_INFO,
+                {
+                  ...appUserInfo,
+                  zoom
+                },
+                environment.customConfig.appKey
+              );
+
+              this.store.dispatch(changeZoomSuccess({ zoom }));
+            })
+            .catch(reason => {
+              this.store.dispatch(changeZoomFailure({ error: reason }));
+            });
+        })
+      ),
+    { dispatch: false }
+  );
+
+  constructor(
+    private actions$: Actions,
+    private store: Store<any>,
+    @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
+    private localStorageService: LocalStorageService
+  ) {}
+}
diff --git a/projects/ucap-webmessenger-app/src/app/store/setting/native/index.ts b/projects/ucap-webmessenger-app/src/app/store/setting/native/index.ts
new file mode 100644
index 00000000..2663cade
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/store/setting/native/index.ts
@@ -0,0 +1,4 @@
+export * from './actions';
+export * from './effects';
+export * from './reducers';
+export * from './state';
diff --git a/projects/ucap-webmessenger-app/src/app/store/setting/native/reducers.ts b/projects/ucap-webmessenger-app/src/app/store/setting/native/reducers.ts
new file mode 100644
index 00000000..d280b418
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/store/setting/native/reducers.ts
@@ -0,0 +1,13 @@
+import { createReducer, on } from '@ngrx/store';
+import { State, initialState } from './state';
+import { changeZoomSuccess } from './actions';
+
+export const reducer = createReducer(
+  initialState,
+  on(changeZoomSuccess, (state, action) => {
+    return {
+      ...state,
+      zoom: action.zoom
+    } as State;
+  })
+);
diff --git a/projects/ucap-webmessenger-app/src/app/store/setting/native/state.ts b/projects/ucap-webmessenger-app/src/app/store/setting/native/state.ts
new file mode 100644
index 00000000..b14f22fe
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/store/setting/native/state.ts
@@ -0,0 +1,16 @@
+import { Selector, createSelector } from '@ngrx/store';
+
+// tslint:disable-next-line: no-empty-interface
+export interface State {
+  zoom: number;
+}
+
+export const initialState: State = {
+  zoom: 100
+};
+
+export function selectors<S>(selector: Selector<any, State>) {
+  return {
+    selectZoom: createSelector(selector, (state: State) => state.zoom)
+  };
+}
diff --git a/projects/ucap-webmessenger-app/src/app/types/app-user-info.type.ts b/projects/ucap-webmessenger-app/src/app/types/app-user-info.type.ts
index 2dde9efd..a509706f 100644
--- a/projects/ucap-webmessenger-app/src/app/types/app-user-info.type.ts
+++ b/projects/ucap-webmessenger-app/src/app/types/app-user-info.type.ts
@@ -11,6 +11,7 @@ export interface AppUserInfo {
   companyGroupType?: string;
   localeCode?: LocaleCode;
   idleCheckTime?: number;
+  zoom?: number;
 
   settings?: Settings;
 }
diff --git a/projects/ucap-webmessenger-native-browser/src/lib/services/browser-native.service.ts b/projects/ucap-webmessenger-native-browser/src/lib/services/browser-native.service.ts
index 7929d7ec..7cc971ee 100644
--- a/projects/ucap-webmessenger-native-browser/src/lib/services/browser-native.service.ts
+++ b/projects/ucap-webmessenger-native-browser/src/lib/services/browser-native.service.ts
@@ -215,6 +215,12 @@ export class BrowserNativeService extends NativeService {
 
   windowMaximize(): void {}
 
+  zoomTo(factor: number): Promise<number> {
+    return new Promise<number>((resolve, reject) => {
+      resolve(-1);
+    });
+  }
+
   idleStateChanged(): Observable<WindowIdle> {
     return new Observable<WindowIdle>(subscriber => {
       try {
diff --git a/projects/ucap-webmessenger-native-electron/src/lib/services/electron-native.service.ts b/projects/ucap-webmessenger-native-electron/src/lib/services/electron-native.service.ts
index 63726d4f..ebd98a94 100644
--- a/projects/ucap-webmessenger-native-electron/src/lib/services/electron-native.service.ts
+++ b/projects/ucap-webmessenger-native-electron/src/lib/services/electron-native.service.ts
@@ -1,4 +1,4 @@
-import { ipcRenderer, remote, shell } from 'electron';
+import { ipcRenderer, remote, shell, webFrame } from 'electron';
 
 import { Observable, Subject } from 'rxjs';
 
@@ -34,6 +34,7 @@ import { StatusCode } from '@ucap-webmessenger/core';
 })
 export class ElectronNativeService implements NativeService {
   private ipcRenderer: typeof ipcRenderer;
+  private webFrame: typeof webFrame;
   private remote: typeof remote;
   private shell: typeof shell;
 
@@ -377,6 +378,17 @@ export class ElectronNativeService implements NativeService {
     }
   }
 
+  zoomTo(factor: number): Promise<number> {
+    return new Promise<number>((resolve, reject) => {
+      try {
+        this.webFrame.setZoomFactor(factor / 100);
+        resolve(this.webFrame.getZoomFactor());
+      } catch (error) {
+        reject(error);
+      }
+    });
+  }
+
   idleStateChanged(): Observable<WindowIdle> {
     if (!this.idleStateChangedSubject) {
       this.idleStateChangedSubject = new Subject<WindowIdle>();
@@ -448,6 +460,7 @@ export class ElectronNativeService implements NativeService {
       this.ipcRenderer = (window as any).require('electron').ipcRenderer;
       this.remote = (window as any).require('electron').remote;
       this.shell = (window as any).require('electron').shell;
+      this.webFrame = (window as any).require('electron').webFrame;
     }
   }
 }
diff --git a/projects/ucap-webmessenger-native/src/lib/services/native.service.ts b/projects/ucap-webmessenger-native/src/lib/services/native.service.ts
index 94158b7f..e587488c 100644
--- a/projects/ucap-webmessenger-native/src/lib/services/native.service.ts
+++ b/projects/ucap-webmessenger-native/src/lib/services/native.service.ts
@@ -66,6 +66,7 @@ export abstract class NativeService {
   abstract windowClose(): void;
   abstract windowMinimize(): void;
   abstract windowMaximize(): void;
+  abstract zoomTo(factor: number): Promise<number>;
 
   abstract idleStateChanged(): Observable<WindowIdle>;
   abstract changeLimitOfIdleState(limitTime: number): void;
diff --git a/projects/ucap-webmessenger-ui-settings/src/lib/components/chat.component.html b/projects/ucap-webmessenger-ui-settings/src/lib/components/chat.component.html
index 84c760d5..f5a9742f 100644
--- a/projects/ucap-webmessenger-ui-settings/src/lib/components/chat.component.html
+++ b/projects/ucap-webmessenger-ui-settings/src/lib/components/chat.component.html
@@ -1,6 +1,6 @@
 <div>
   <mat-list>
-    <h1 mat-subheader>{{ 'settings.chat.label' | translate }}</h1>
+    <!-- <h1 mat-subheader>{{ 'settings.chat.label' | translate }}</h1>
     <mat-list-item>
       <span class="item-title">{{
         'settings.chat.fontFamily' | translate
@@ -37,7 +37,7 @@
       </span>
     </mat-list-item>
 
-    <mat-divider></mat-divider>
+    <mat-divider></mat-divider> -->
 
     <h1 mat-subheader *ngIf="_isNodeWebkit">
       {{ 'settings.chat.file' | translate }}
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/inline-edit-input.component.html b/projects/ucap-webmessenger-ui/src/lib/components/inline-edit-input.component.html
new file mode 100644
index 00000000..213e2daa
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/src/lib/components/inline-edit-input.component.html
@@ -0,0 +1,25 @@
+<ng-container>
+  <ng-container #view *ngIf="!editMode">
+    <ng-content select="[ucapInlineEditInput='view']"></ng-content>
+    <span class="view-actions">
+      <button mat-icon-button aria-label="Edit" (click)="onClickEdit($event)">
+        <span class="mdi mdi-square-edit-outline mdi-20px"></span>
+      </button>
+    </span>
+  </ng-container>
+  <ng-container #edit *ngIf="editMode">
+    <ng-content select="[ucapInlineEditInput='edit']"></ng-content>
+    <span class="edit-actions">
+      <button mat-icon-button aria-label="Apply" (click)="onClickApply($event)">
+        <span class="mdi mdi-check mdi-20px"></span>
+      </button>
+      <button
+        mat-icon-button
+        aria-label="Cacel"
+        (click)="onClickCancel($event)"
+      >
+        <span class="mdi mdi-close mdi-20px"></span>
+      </button>
+    </span>
+  </ng-container>
+</ng-container>
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/inline-edit-input.component.scss b/projects/ucap-webmessenger-ui/src/lib/components/inline-edit-input.component.scss
new file mode 100644
index 00000000..130eb13d
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/src/lib/components/inline-edit-input.component.scss
@@ -0,0 +1,7 @@
+.view-actions {
+  margin-right: 0px;
+}
+
+.edit-actions {
+  margin-right: 0px;
+}
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/inline-edit-input.component.spec.ts b/projects/ucap-webmessenger-ui/src/lib/components/inline-edit-input.component.spec.ts
new file mode 100644
index 00000000..747d03dc
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/src/lib/components/inline-edit-input.component.spec.ts
@@ -0,0 +1,25 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InlineEditInputComponent } from './inline-edit-input.component';
+
+describe('InlineEditInputComponent', () => {
+  let component: InlineEditInputComponent;
+  let fixture: ComponentFixture<InlineEditInputComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [InlineEditInputComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(InlineEditInputComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/inline-edit-input.component.ts b/projects/ucap-webmessenger-ui/src/lib/components/inline-edit-input.component.ts
new file mode 100644
index 00000000..1796dace
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/src/lib/components/inline-edit-input.component.ts
@@ -0,0 +1,33 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'ucap-inline-edit-input',
+  templateUrl: './inline-edit-input.component.html',
+  styleUrls: ['./inline-edit-input.component.scss']
+})
+export class InlineEditInputComponent implements OnInit {
+  get editMode() {
+    return this._editMode;
+  }
+  set editMode(editMode: boolean) {
+    this._editMode = editMode;
+  }
+  // tslint:disable-next-line: variable-name
+  _editMode = false;
+
+  constructor() {}
+
+  ngOnInit() {}
+
+  onClickEdit(event: Event) {
+    this.editMode = true;
+  }
+
+  onClickCancel(event: Event) {
+    this.editMode = false;
+  }
+
+  onClickApply(event: Event) {
+    this.editMode = false;
+  }
+}
diff --git a/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts b/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts
index f5195542..1510db10 100644
--- a/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts
+++ b/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts
@@ -38,6 +38,7 @@ import { PickDateComponent } from './components/pick-date.component';
 import { PickTimeComponent } from './components/pick-time.component';
 import { StepInputComponent } from './components/step-input.component';
 import { StickerSelectorComponent } from './components/sticker-selector.component';
+import { InlineEditInputComponent } from './components/inline-edit-input.component';
 
 import { BinaryViewerComponent } from './components/file-viewer/binary-viewer.component';
 import { DocumentViewerComponent } from './components/file-viewer/document-viewer.component';
@@ -88,6 +89,7 @@ const COMPONENTS = [
   PickTimeComponent,
   StepInputComponent,
   TranslationSectionComponent,
+  InlineEditInputComponent,
 
   BinaryViewerComponent,
   DocumentViewerComponent,
diff --git a/projects/ucap-webmessenger-ui/src/public-api.ts b/projects/ucap-webmessenger-ui/src/public-api.ts
index 7a509dfa..4ad82c07 100644
--- a/projects/ucap-webmessenger-ui/src/public-api.ts
+++ b/projects/ucap-webmessenger-ui/src/public-api.ts
@@ -18,6 +18,7 @@ export * from './lib/components/pick-time.component';
 export * from './lib/components/step-input.component';
 export * from './lib/components/split-button.component';
 export * from './lib/components/sticker-selector.component';
+export * from './lib/components/inline-edit-input.component';
 
 export * from './lib/data-source/virtual-scroll-tree-flat.data-source';
 

From 993003ef608547f5cf36eb5c21c7c9d5ba0b3ecb Mon Sep 17 00:00:00 2001
From: Richard Park <crusader@loafle.com>
Date: Mon, 13 Jan 2020 14:54:25 +0900
Subject: [PATCH 02/10] changing of status message is implemented

---
 .../native/components/top-bar.component.html  | 85 +++++++++----------
 .../native/components/top-bar.component.ts    | 36 ++++++++
 .../store/account/authentication/actions.ts   | 18 ++++
 .../store/account/authentication/effects.ts   | 27 +++++-
 .../store/account/authentication/reducers.ts  | 55 +++++++++++-
 .../src/lib/types/user-info-update.type.ts    |  8 +-
 .../components/inline-edit-input.component.ts |  6 +-
 7 files changed, 187 insertions(+), 48 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
index 62a1a776..17aa367e 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
@@ -335,41 +335,55 @@
     <button mat-menu-item (click)="onClickStatusBusy($event, 1)">
       <span class="presence pcOther"> </span>
       <ucap-inline-edit-input
-        #statusMessage1
         (click)="$event.stopPropagation()"
+        (apply)="onApplyStatusMessage(1, statusMessage1.value)"
       >
         <span ucapInlineEditInput="view">{{ loginRes?.statusMessage1 }}</span>
-        <span ucapInlineEditInput="edit"><input matInput type="text"/></span>
+        <span ucapInlineEditInput="edit"
+          ><input
+            matInput
+            #statusMessage1
+            type="text"
+            [value]="loginRes?.statusMessage1"
+        /></span>
       </ucap-inline-edit-input>
-      <!-- {{ loginRes?.statusMessage1 }} -->
     </button>
-    <!-- <button
-      mat-menu-item
-      class="edit"
-      (click)="$event.stopPropagation(); statusMessage1.editMode = true"
-    ></button> -->
   </div>
   <div class="setting">
     <button mat-menu-item (click)="onClickStatusBusy($event, 2)">
       <span class="presence pcOther"> </span>
-      {{ loginRes?.statusMessage2 }}
+      <ucap-inline-edit-input
+        (click)="$event.stopPropagation()"
+        (apply)="onApplyStatusMessage(2, statusMessage2.value)"
+      >
+        <span ucapInlineEditInput="view">{{ loginRes?.statusMessage2 }}</span>
+        <span ucapInlineEditInput="edit"
+          ><input
+            matInput
+            #statusMessage2
+            type="text"
+            [value]="loginRes?.statusMessage2"
+        /></span>
+      </ucap-inline-edit-input>
     </button>
-    <button
-      mat-menu-item
-      class="edit"
-      (click)="onClickChangeStatusBusy($event, 2)"
-    ></button>
   </div>
   <div class="setting">
     <button mat-menu-item (click)="onClickStatusBusy($event, 3)">
       <span class="presence pcOther"> </span>
-      {{ loginRes?.statusMessage3 }}
+      <ucap-inline-edit-input
+        (click)="$event.stopPropagation()"
+        (apply)="onApplyStatusMessage(3, statusMessage3.value)"
+      >
+        <span ucapInlineEditInput="view">{{ loginRes?.statusMessage3 }}</span>
+        <span ucapInlineEditInput="edit"
+          ><input
+            matInput
+            #statusMessage3
+            type="text"
+            [value]="loginRes?.statusMessage3"
+        /></span>
+      </ucap-inline-edit-input>
     </button>
-    <button
-      mat-menu-item
-      class="edit"
-      (click)="onClickChangeStatusBusy($event, 3)"
-    ></button>
   </div>
 </mat-menu>
 
@@ -377,28 +391,11 @@
   <div mat-menu-item (click)="$event.stopPropagation()">
     {{ 'presence.settingOfAwayTime' | translate }}
   </div>
-  <div mat-menu-item>
-    <mat-radio-button
-      value="10"
-      [checked]="myIdleCheckTime === 10"
-      (change)="onChangeAwayTime($event)"
-      >10{{ 'common.units.minute' | translate }}</mat-radio-button
-    >
-  </div>
-  <div mat-menu-item>
-    <mat-radio-button
-      value="20"
-      [checked]="myIdleCheckTime === 20"
-      (change)="onChangeAwayTime($event)"
-      >20{{ 'common.units.minute' | translate }}</mat-radio-button
-    >
-  </div>
-  <div mat-menu-item>
-    <mat-radio-button
-      value="30"
-      [checked]="myIdleCheckTime === 30"
-      (change)="onChangeAwayTime($event)"
-      >30{{ 'common.units.minute' | translate }}</mat-radio-button
-    >
-  </div>
+  <mat-radio-group aria-label="Select an option" [value]="myIdleCheckTime">
+    <div mat-menu-item *ngFor="let awayTime of awayTimeList">
+      <mat-radio-button [value]="awayTime" (change)="onChangeAwayTime($event)">
+        {{ awayTime }}{{ 'common.units.minute' | translate }}</mat-radio-button
+      >
+    </div>
+  </mat-radio-group>
 </mat-menu>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.ts
index 253bb848..7e33245a 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.ts
@@ -60,6 +60,7 @@ import { DOCUMENT } from '@angular/common';
 import { MatMenu, MatRadioChange } from '@angular/material';
 import { StatusCode, StatusType } from '@ucap-webmessenger/core';
 import { StatusInfo } from '@ucap-webmessenger/protocol-status';
+import { UserInfoUpdateType } from '@ucap-webmessenger/protocol-info';
 
 const zoomFactors = [60, 70, 85, 100, 120, 145, 170, 200];
 
@@ -95,6 +96,8 @@ export class TopBarComponent implements OnInit, OnDestroy {
   WebLinkType = WebLinkType;
   StatusCode = StatusCode;
 
+  readonly awayTimeList = [10, 20, 30];
+
   @ViewChild('profileMenu', { static: true })
   profileMenu: MatMenu;
 
@@ -169,12 +172,19 @@ export class TopBarComponent implements OnInit, OnDestroy {
   ngOnDestroy(): void {
     if (!!this.loginResSubscription) {
       this.loginResSubscription.unsubscribe();
+      this.loginResSubscription = undefined;
     }
     if (!!this.myStatusSubscription) {
       this.myStatusSubscription.unsubscribe();
+      this.myStatusSubscription = undefined;
     }
     if (!!this.myIdleCheckTimeSubscription) {
       this.myIdleCheckTimeSubscription.unsubscribe();
+      this.myIdleCheckTimeSubscription = undefined;
+    }
+    if (!!this.zoomSubscription) {
+      this.zoomSubscription.unsubscribe();
+      this.zoomSubscription = undefined;
     }
   }
 
@@ -452,6 +462,32 @@ export class TopBarComponent implements OnInit, OnDestroy {
     );
   }
 
+  onApplyStatusMessage(index: number, statusMessage: string) {
+    this.logger.debug('StatusMessage', index, statusMessage);
+
+    let updateType: UserInfoUpdateType;
+    switch (index) {
+      case 1:
+        updateType = UserInfoUpdateType.StatusMessage1;
+        break;
+      case 2:
+        updateType = UserInfoUpdateType.StatusMessage2;
+        break;
+      case 3:
+        updateType = UserInfoUpdateType.StatusMessage3;
+        break;
+
+      default:
+        return;
+    }
+
+    this.store.dispatch(
+      AuthenticationStore.infoUser({
+        req: { type: updateType, info: statusMessage }
+      })
+    );
+  }
+
   onClickChangeStatusBusy(event: Event, index: number) {
     event.stopPropagation();
   }
diff --git a/projects/ucap-webmessenger-app/src/app/store/account/authentication/actions.ts b/projects/ucap-webmessenger-app/src/app/store/account/authentication/actions.ts
index c0e6456c..cd3a61d6 100644
--- a/projects/ucap-webmessenger-app/src/app/store/account/authentication/actions.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/account/authentication/actions.ts
@@ -8,6 +8,7 @@ import {
   UserPasswordSetRequest,
   UserPasswordSetResponse
 } from '@ucap-webmessenger/protocol-service';
+import { UserRequest, UserResponse } from '@ucap-webmessenger/protocol-info';
 
 export const webLogin = createAction(
   '[Account::Authentication] Web Login',
@@ -122,3 +123,20 @@ export const updateLoginRes = createAction(
     loginRes: LoginResponse;
   }>()
 );
+
+export const infoUser = createAction(
+  '[Account::Authentication] Info User',
+  props<{ req: UserRequest }>()
+);
+
+export const infoUserSuccess = createAction(
+  '[Account::Authentication] Info User Success',
+  props<{
+    res: UserResponse;
+  }>()
+);
+
+export const infoUserFailure = createAction(
+  '[Account::Authentication] Info User Failure',
+  props<{ error: any }>()
+);
diff --git a/projects/ucap-webmessenger-app/src/app/store/account/authentication/effects.ts b/projects/ucap-webmessenger-app/src/app/store/account/authentication/effects.ts
index 2f3d1186..3926db44 100644
--- a/projects/ucap-webmessenger-app/src/app/store/account/authentication/effects.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/account/authentication/effects.ts
@@ -41,7 +41,10 @@ import {
   logoutInitialize,
   userPasswordSet,
   userPasswordSetSuccess,
-  userPasswordSetFailure
+  userPasswordSetFailure,
+  infoUser,
+  infoUserSuccess,
+  infoUserFailure
 } from './actions';
 import {
   LoginInfo,
@@ -77,6 +80,10 @@ import { DaesangUrlInfoResponse } from '@ucap-webmessenger/api-external';
 import { AppUserInfo, KEY_APP_USER_INFO } from '@app/types/app-user-info.type';
 import { DaesangCipherService, WebLinkType } from '@ucap-webmessenger/daesang';
 import { TranslateService } from '@ngx-translate/core';
+import {
+  InfoProtocolService,
+  UserResponse
+} from '@ucap-webmessenger/protocol-info';
 
 @Injectable()
 export class Effects {
@@ -482,6 +489,23 @@ export class Effects {
     { dispatch: false }
   );
 
+  infoUser$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(infoUser),
+      map(action => action.req),
+      exhaustMap(req =>
+        this.infoProtocolService.user(req).pipe(
+          map((res: UserResponse) => {
+            return infoUserSuccess({
+              res
+            });
+          }),
+          catchError(error => of(infoUserFailure({ error })))
+        )
+      )
+    )
+  );
+
   constructor(
     private actions$: Actions,
     private ngZone: NgZone,
@@ -493,6 +517,7 @@ export class Effects {
     private appAuthenticationService: AppAuthenticationService,
     private protocolService: ProtocolService,
     private authenticationProtocolService: AuthenticationProtocolService,
+    private infoProtocolService: InfoProtocolService,
     private serviceProtocolService: ServiceProtocolService,
     private translateService: TranslateService,
     private dialogService: DialogService,
diff --git a/projects/ucap-webmessenger-app/src/app/store/account/authentication/reducers.ts b/projects/ucap-webmessenger-app/src/app/store/account/authentication/reducers.ts
index 9b305d30..7429a773 100644
--- a/projects/ucap-webmessenger-app/src/app/store/account/authentication/reducers.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/account/authentication/reducers.ts
@@ -6,8 +6,10 @@ import {
   initialLoginFailCount,
   logout,
   logoutInitialize,
-  updateLoginRes
+  updateLoginRes,
+  infoUserSuccess
 } from './actions';
+import { UserInfoUpdateType } from '@ucap-webmessenger/protocol-info';
 
 export const reducer = createReducer(
   initialState,
@@ -39,6 +41,57 @@ export const reducer = createReducer(
     };
   }),
 
+  on(infoUserSuccess, (state, action) => {
+    let loginRes = {
+      ...state.loginRes
+    };
+
+    switch (action.res.type) {
+      case UserInfoUpdateType.Image:
+        loginRes = {
+          ...loginRes
+        };
+        break;
+      case UserInfoUpdateType.Intro:
+        loginRes = {
+          ...loginRes
+        };
+        break;
+      case UserInfoUpdateType.TelephoneVisible:
+        loginRes = {
+          ...loginRes
+        };
+        break;
+      case UserInfoUpdateType.StatusMessage1:
+        loginRes = {
+          ...loginRes,
+          statusMessage1: action.res.info
+        };
+        break;
+      case UserInfoUpdateType.StatusMessage2:
+        loginRes = {
+          ...loginRes,
+          statusMessage2: action.res.info
+        };
+        break;
+      case UserInfoUpdateType.StatusMessage3:
+        loginRes = {
+          ...loginRes,
+          statusMessage3: action.res.info
+        };
+        break;
+      default:
+        break;
+    }
+
+    return {
+      ...state,
+      loginRes: {
+        ...loginRes
+      }
+    };
+  }),
+
   on(logoutInitialize, (state, action) => {
     return {
       ...initialState
diff --git a/projects/ucap-webmessenger-protocol-info/src/lib/types/user-info-update.type.ts b/projects/ucap-webmessenger-protocol-info/src/lib/types/user-info-update.type.ts
index a2496524..fb25bcf8 100644
--- a/projects/ucap-webmessenger-protocol-info/src/lib/types/user-info-update.type.ts
+++ b/projects/ucap-webmessenger-protocol-info/src/lib/types/user-info-update.type.ts
@@ -4,7 +4,13 @@ export enum UserInfoUpdateType {
   // R: 인트로소개
   Intro = 'R',
   // T: 전화보이기여부
-  TelephoneVisible = 'T'
+  TelephoneVisible = 'T',
+  /** StatusMessage1 */
+  StatusMessage1 = 'S1',
+  /** StatusMessage2 */
+  StatusMessage2 = 'S2',
+  /** StatusMessage3 */
+  StatusMessage3 = 'S3'
 }
 
 export enum TelephoneVisibleType {
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/inline-edit-input.component.ts b/projects/ucap-webmessenger-ui/src/lib/components/inline-edit-input.component.ts
index 1796dace..56ea1bbd 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/inline-edit-input.component.ts
+++ b/projects/ucap-webmessenger-ui/src/lib/components/inline-edit-input.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Output, EventEmitter } from '@angular/core';
 
 @Component({
   selector: 'ucap-inline-edit-input',
@@ -6,6 +6,9 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./inline-edit-input.component.scss']
 })
 export class InlineEditInputComponent implements OnInit {
+  @Output()
+  apply = new EventEmitter<void>();
+
   get editMode() {
     return this._editMode;
   }
@@ -29,5 +32,6 @@ export class InlineEditInputComponent implements OnInit {
 
   onClickApply(event: Event) {
     this.editMode = false;
+    this.apply.emit();
   }
 }

From 9561dcbe80ed4d39481538ea6ca26078d3252437 Mon Sep 17 00:00:00 2001
From: Richard Park <crusader@loafle.com>
Date: Mon, 13 Jan 2020 15:17:58 +0900
Subject: [PATCH 03/10] bug fixed

---
 .../native/components/top-bar.component.html  | 27 ++++++++++++++-----
 .../components/inline-edit-input.component.ts | 10 +++++--
 2 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
index 17aa367e..2063a3da 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
@@ -335,8 +335,12 @@
     <button mat-menu-item (click)="onClickStatusBusy($event, 1)">
       <span class="presence pcOther"> </span>
       <ucap-inline-edit-input
-        (click)="$event.stopPropagation()"
-        (apply)="onApplyStatusMessage(1, statusMessage1.value)"
+        (apply)="
+          $event.stopPropagation();
+          onApplyStatusMessage(1, statusMessage1.value)
+        "
+        (edit)="$event.stopPropagation()"
+        (cancel)="$event.stopPropagation()"
       >
         <span ucapInlineEditInput="view">{{ loginRes?.statusMessage1 }}</span>
         <span ucapInlineEditInput="edit"
@@ -345,6 +349,7 @@
             #statusMessage1
             type="text"
             [value]="loginRes?.statusMessage1"
+            (click)="$event.stopPropagation()"
         /></span>
       </ucap-inline-edit-input>
     </button>
@@ -353,8 +358,12 @@
     <button mat-menu-item (click)="onClickStatusBusy($event, 2)">
       <span class="presence pcOther"> </span>
       <ucap-inline-edit-input
-        (click)="$event.stopPropagation()"
-        (apply)="onApplyStatusMessage(2, statusMessage2.value)"
+        (apply)="
+          $event.stopPropagation();
+          onApplyStatusMessage(2, statusMessage2.value)
+        "
+        (edit)="$event.stopPropagation()"
+        (cancel)="$event.stopPropagation()"
       >
         <span ucapInlineEditInput="view">{{ loginRes?.statusMessage2 }}</span>
         <span ucapInlineEditInput="edit"
@@ -363,6 +372,7 @@
             #statusMessage2
             type="text"
             [value]="loginRes?.statusMessage2"
+            (click)="$event.stopPropagation()"
         /></span>
       </ucap-inline-edit-input>
     </button>
@@ -371,8 +381,12 @@
     <button mat-menu-item (click)="onClickStatusBusy($event, 3)">
       <span class="presence pcOther"> </span>
       <ucap-inline-edit-input
-        (click)="$event.stopPropagation()"
-        (apply)="onApplyStatusMessage(3, statusMessage3.value)"
+        (apply)="
+          $event.stopPropagation();
+          onApplyStatusMessage(3, statusMessage3.value)
+        "
+        (edit)="$event.stopPropagation()"
+        (cancel)="$event.stopPropagation()"
       >
         <span ucapInlineEditInput="view">{{ loginRes?.statusMessage3 }}</span>
         <span ucapInlineEditInput="edit"
@@ -381,6 +395,7 @@
             #statusMessage3
             type="text"
             [value]="loginRes?.statusMessage3"
+            (click)="$event.stopPropagation()"
         /></span>
       </ucap-inline-edit-input>
     </button>
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/inline-edit-input.component.ts b/projects/ucap-webmessenger-ui/src/lib/components/inline-edit-input.component.ts
index 56ea1bbd..633108a5 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/inline-edit-input.component.ts
+++ b/projects/ucap-webmessenger-ui/src/lib/components/inline-edit-input.component.ts
@@ -7,7 +7,11 @@ import { Component, OnInit, Output, EventEmitter } from '@angular/core';
 })
 export class InlineEditInputComponent implements OnInit {
   @Output()
-  apply = new EventEmitter<void>();
+  edit = new EventEmitter<Event>();
+  @Output()
+  cancel = new EventEmitter<Event>();
+  @Output()
+  apply = new EventEmitter<Event>();
 
   get editMode() {
     return this._editMode;
@@ -24,14 +28,16 @@ export class InlineEditInputComponent implements OnInit {
 
   onClickEdit(event: Event) {
     this.editMode = true;
+    this.edit.emit(event);
   }
 
   onClickCancel(event: Event) {
     this.editMode = false;
+    this.cancel.emit(event);
   }
 
   onClickApply(event: Event) {
     this.editMode = false;
-    this.apply.emit();
+    this.apply.emit(event);
   }
 }

From 34e8db65b4509c2316f54f2ae484d40ea589e534 Mon Sep 17 00:00:00 2001
From: Richard Park <crusader@loafle.com>
Date: Mon, 13 Jan 2020 15:41:35 +0900
Subject: [PATCH 04/10] app version is added

---
 .../ucap-webmessenger-electron/src/index.ts          |  7 +++++++
 .../layouts/native/components/top-bar.component.html | 12 ++++++++++++
 .../layouts/native/components/top-bar.component.ts   |  6 ++++++
 .../ucap-webmessenger-app/src/assets/i18n/en.json    |  4 ++++
 .../ucap-webmessenger-app/src/assets/i18n/ko.json    |  4 ++++
 .../src/lib/services/browser-native.service.ts       |  6 ++++++
 .../src/lib/services/electron-native.service.ts      | 10 ++++++++++
 .../src/lib/types/channel.type.ts                    |  3 ++-
 .../src/lib/services/native.service.ts               |  1 +
 9 files changed, 52 insertions(+), 1 deletion(-)

diff --git a/electron-projects/ucap-webmessenger-electron/src/index.ts b/electron-projects/ucap-webmessenger-electron/src/index.ts
index ca04b864..b5cb70ac 100644
--- a/electron-projects/ucap-webmessenger-electron/src/index.ts
+++ b/electron-projects/ucap-webmessenger-electron/src/index.ts
@@ -397,6 +397,13 @@ ipcMain.on(
   }
 );
 
+ipcMain.on(
+  MessengerChannel.GetVersionInfo,
+  (event: IpcMainEvent, ...args: any[]) => {
+    event.returnValue = app.getVersion();
+  }
+);
+
 ipcMain.on(
   MessengerChannel.ChangeAutoLaunch,
   (event: IpcMainEvent, ...args: any[]) => {
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
index 2063a3da..2bbad637 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
@@ -306,6 +306,12 @@
     </button>
   </div>
   <mat-divider></mat-divider>
+  <div class="setting">
+    <button mat-menu-item [matMenuTriggerFor]="informationMenu">
+      {{ 'information.label' | translate }}
+    </button>
+  </div>
+  <mat-divider></mat-divider>
   <div class="setting">
     <button mat-menu-item (click)="onClickLogout()">
       {{ 'accounts.logout' | translate }}
@@ -414,3 +420,9 @@
     </div>
   </mat-radio-group>
 </mat-menu>
+
+<mat-menu #informationMenu="matMenu">
+  <div mat-menu-item>
+    {{ 'information.version' | translate }}: {{ appVersion }}
+  </div>
+</mat-menu>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.ts
index 7e33245a..c5a7eaf6 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.ts
@@ -93,6 +93,8 @@ export class TopBarComponent implements OnInit, OnDestroy {
   webLinkBadgeMail = 0;
   webLinkBadgePayment = 0;
 
+  appVersion: string;
+
   WebLinkType = WebLinkType;
   StatusCode = StatusCode;
 
@@ -167,6 +169,10 @@ export class TopBarComponent implements OnInit, OnDestroy {
     );
 
     this.zoom = appUserInfo.zoom;
+
+    this.nativeService.getVersionInfo().then(ver => {
+      this.appVersion = ver;
+    });
   }
 
   ngOnDestroy(): void {
diff --git a/projects/ucap-webmessenger-app/src/assets/i18n/en.json b/projects/ucap-webmessenger-app/src/assets/i18n/en.json
index 79f1ef52..69a72fd4 100644
--- a/projects/ucap-webmessenger-app/src/assets/i18n/en.json
+++ b/projects/ucap-webmessenger-app/src/assets/i18n/en.json
@@ -67,6 +67,10 @@
       "failToChangeProfileImage": "Failed to change profile image."
     }
   },
+  "information": {
+    "label": "Information",
+    "version": "Version"
+  },
   "settings": {
     "label": "Settings",
     "typeGenernal": "Genernal",
diff --git a/projects/ucap-webmessenger-app/src/assets/i18n/ko.json b/projects/ucap-webmessenger-app/src/assets/i18n/ko.json
index 6b437934..b79960fa 100644
--- a/projects/ucap-webmessenger-app/src/assets/i18n/ko.json
+++ b/projects/ucap-webmessenger-app/src/assets/i18n/ko.json
@@ -67,6 +67,10 @@
       "failToChangeProfileImage": "프로필 이미지 변경에 실패 하였습니다."
     }
   },
+  "information": {
+    "label": "정보",
+    "version": "버전"
+  },
   "settings": {
     "label": "설정",
     "typeGenernal": "일반",
diff --git a/projects/ucap-webmessenger-native-browser/src/lib/services/browser-native.service.ts b/projects/ucap-webmessenger-native-browser/src/lib/services/browser-native.service.ts
index 7cc971ee..dd3a7db5 100644
--- a/projects/ucap-webmessenger-native-browser/src/lib/services/browser-native.service.ts
+++ b/projects/ucap-webmessenger-native-browser/src/lib/services/browser-native.service.ts
@@ -78,6 +78,12 @@ export class BrowserNativeService extends NativeService {
     });
   }
 
+  getVersionInfo(): Promise<string> {
+    return new Promise<any>((resolve, reject) => {
+      resolve('');
+    });
+  }
+
   changeAutoLaunch(autoLaunch: boolean): Promise<boolean> {
     return new Promise<boolean>((resolve, reject) => {
       resolve(true);
diff --git a/projects/ucap-webmessenger-native-electron/src/lib/services/electron-native.service.ts b/projects/ucap-webmessenger-native-electron/src/lib/services/electron-native.service.ts
index ebd98a94..97fdfb19 100644
--- a/projects/ucap-webmessenger-native-electron/src/lib/services/electron-native.service.ts
+++ b/projects/ucap-webmessenger-native-electron/src/lib/services/electron-native.service.ts
@@ -90,6 +90,16 @@ export class ElectronNativeService implements NativeService {
     });
   }
 
+  getVersionInfo(): Promise<string> {
+    return new Promise<string>((resolve, reject) => {
+      try {
+        resolve(this.ipcRenderer.sendSync(MessengerChannel.GetVersionInfo));
+      } catch (error) {
+        reject(error);
+      }
+    });
+  }
+
   changeStatus(): Observable<StatusCode> {
     if (!this.changeStatusSubject) {
       this.changeStatusSubject = new Subject<StatusCode>();
diff --git a/projects/ucap-webmessenger-native-electron/src/lib/types/channel.type.ts b/projects/ucap-webmessenger-native-electron/src/lib/types/channel.type.ts
index f766d95a..611c8d76 100644
--- a/projects/ucap-webmessenger-native-electron/src/lib/types/channel.type.ts
+++ b/projects/ucap-webmessenger-native-electron/src/lib/types/channel.type.ts
@@ -5,7 +5,8 @@ export enum MessengerChannel {
   ChangeAutoLaunch = 'UCAP::messenger::changeAutoLaunch',
   ChangeStartupHideWindow = 'UCAP::messenger::changeStartupHideWindow',
   ChangeDownloadPath = 'UCAP::messenger::changeDownloadPath',
-  GetNetworkInfo = 'UCAP::messenger::getNetworkInfo'
+  GetNetworkInfo = 'UCAP::messenger::getNetworkInfo',
+  GetVersionInfo = 'UCAP::messenger::getVersionInfo'
 }
 
 export enum ChatChannel {
diff --git a/projects/ucap-webmessenger-native/src/lib/services/native.service.ts b/projects/ucap-webmessenger-native/src/lib/services/native.service.ts
index e587488c..d4967761 100644
--- a/projects/ucap-webmessenger-native/src/lib/services/native.service.ts
+++ b/projects/ucap-webmessenger-native/src/lib/services/native.service.ts
@@ -25,6 +25,7 @@ export abstract class NativeService {
   abstract showSetting(): Observable<void>;
 
   abstract getNetworkInfo(): Promise<any>;
+  abstract getVersionInfo(): Promise<string>;
 
   abstract changeAutoLaunch(autoLaunch: boolean): Promise<boolean>;
   abstract changeStartupHideWindow(

From 25ad64ce2e55c7606876f360dd4308a221922ef4 Mon Sep 17 00:00:00 2001
From: Richard Park <crusader@loafle.com>
Date: Mon, 13 Jan 2020 16:19:23 +0900
Subject: [PATCH 05/10] zooming is disabled

---
 .../src/app/layouts/native/components/top-bar.component.html  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
index 2bbad637..8eacbece 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
@@ -274,7 +274,7 @@
       {{ 'profile.open' | translate }}
     </button>
   </div>
-  <div class="setting">
+  <!-- <div class="setting">
     <button
       mat-menu-item
       class="zoom minus-square"
@@ -289,7 +289,7 @@
     >
       확대
     </button>
-  </div>
+  </div> -->
   <div class="setting">
     <button mat-menu-item (click)="onClickNotice()">
       {{ 'notice.label' | translate }}

From 3cfd84bd9a2a7adbd4b960d3a075536baf2865e4 Mon Sep 17 00:00:00 2001
From: khk <khk@gmail.com>
Date: Mon, 13 Jan 2020 16:24:38 +0900
Subject: [PATCH 06/10] =?UTF-8?q?=EC=AA=BD=EC=A7=80=20=EB=A6=AC=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../message-detail.dialog.component.html      |  4 +-
 .../message-detail.dialog.component.scss      | 38 +++++++++++++-
 .../lib/components/list-item.component.html   | 30 ++++++++++-
 .../lib/components/list-item.component.scss   | 52 +++++++++++++++++++
 4 files changed, 119 insertions(+), 5 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.html
index f5fd3df7..26ea44f6 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.html
@@ -143,7 +143,8 @@
                 <div>
                   <span class="mdi" [ngClass]="getFileStatusIcon(file)"></span>
                   <span>{{ file.resContent }}</span>
-                  <span>{{ file.resSize | ucapBytes }}</span>
+                </div>
+                  <span class="file-size">{{ file.resSize | ucapBytes }}</span>
                   <a>
                     <span
                       class="mdi mdi-download"
@@ -151,7 +152,6 @@
                       (click)="downloadAttachFileSingle(file)"
                     ></span>
                   </a>
-                </div>
               </li>
             </ul>
           </div>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.scss
index fc124522..83ee9fe3 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.scss
@@ -109,5 +109,41 @@
     .ps {
       align-items: flex-start;
     }
+ .attachFile {
+      border-top: 1px solid #dddddd;
+      li {
+        display: flex;
+        flex-flow: row;
+        line-height: 2em;
+        flex: 1 1 auto;
+        .file-name {
+          display: inline-flex;
+          flex-flow: row;
+          flex: 1 1 auto;
+          border: 1px solid red;
+          white-space: nowrap;
+          word-wrap: normal;
+          overflow: hidden;
+          span:last-child {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: block;
+            width: calc(100% - 40px);
+          }
+        }
+        .file-size {
+          display: inline-flex;
+          margin-left: auto;
+          align-self: flex-end;
+          flex: 0 0 auto;
+          margin: 0 10px;
+        }
+        a {
+          display: inline-block;
+          width: 20px;
+          height: 100%;
+        }
+      }
+    }
   }
-}
+}
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-ui-message/src/lib/components/list-item.component.html b/projects/ucap-webmessenger-ui-message/src/lib/components/list-item.component.html
index a2795aac..75a3957b 100644
--- a/projects/ucap-webmessenger-ui-message/src/lib/components/list-item.component.html
+++ b/projects/ucap-webmessenger-ui-message/src/lib/components/list-item.component.html
@@ -1,5 +1,5 @@
 <!--체크박스 보여줄때는 <div class="list-item checkbox" matRipple>  클래스에 checkbox만 추가-->
-<div class="list-item" *ngIf="message" matRipple>
+<!--<div class="list-item" *ngIf="message" matRipple>
   <dl class="item-default">
     <dt>
       <mat-icon
@@ -34,4 +34,30 @@
       </div>
     </dd>
   </dl>
-</div>
+</div>-->
+
+<div class="list-item message-list" *ngIf="message" matRipple>
+  <dl class="item-default">
+    <dt>
+      <span class="name">
+        {{ message.userName }}
+        <span *ngIf="message.userCount > 1" class="text-accent-color number">
+          {{
+            'message.andOthers' | translate: { count: message.userCount - 1 }
+          }}
+        </span>
+      </span>
+    </dt>
+    <dd>
+      <mat-icon *ngIf="!!message.resType && message.resType === ContentType.Image">image</mat-icon>
+      <mat-icon *ngIf="!!message.resType && message.resType === ContentType.AttachFile">attach_file</mat-icon>
+      {{ message.title }}
+    </dd>
+  </dl>
+  <div class="date">
+    <span>{{ message.regDate | ucapDate: 'MM:DD' }}</span>
+    <span *ngIf="message.type === MessageType.Receive && !message.readYn" class="badge-new bg-warn-darkest">
+      N
+    </span>
+  </div>
+</div>
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-ui-message/src/lib/components/list-item.component.scss b/projects/ucap-webmessenger-ui-message/src/lib/components/list-item.component.scss
index e69de29b..baeb82b3 100644
--- a/projects/ucap-webmessenger-ui-message/src/lib/components/list-item.component.scss
+++ b/projects/ucap-webmessenger-ui-message/src/lib/components/list-item.component.scss
@@ -0,0 +1,52 @@
+.message-list {
+  &.list-item {
+    dl {
+      display: flex;
+      flex-flow: column;
+      flex: 1 1 auto;
+      width: calc(100% - 80px);
+      dt {
+        .name {
+          font-size: 16px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: block;
+          white-space: nowrap;
+          word-wrap: normal;
+          font-weight: 600;
+          span {
+            font-size: 13px;
+          }
+        }
+      }
+
+      dd {
+        color: #777777;
+        margin-top: 4px;
+        white-space: nowrap;
+        word-wrap: normal;
+        text-overflow: ellipsis;
+        display: block;
+        width: 100%;
+        position: relative;
+        overflow: hidden;
+      }
+    }
+    .date {
+      display: flex;
+      flex-flow: column;
+      align-self: flex-start;
+      .badge-new {
+        border-radius: 50%;
+        color: #ffffff;
+        padding: 0;
+        text-align: center;
+        align-self: flex-end;
+        width: 20px;
+        height: 20px;
+        font-size: 12px;
+        margin-top: 4px;
+      }
+    }
+  }
+}

From 8b8c12208bfdcb446071f0876a86ae44a45cdb91 Mon Sep 17 00:00:00 2001
From: Richard Park <crusader@loafle.com>
Date: Mon, 13 Jan 2020 16:28:52 +0900
Subject: [PATCH 07/10] bug fixed

---
 .../messenger/components/left-sidenav/group.component.html      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html
index 3a39364d..2c8a44d4 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html
@@ -168,7 +168,7 @@
       (click)="onClickProfileContextMenu('REGISTER_FAVORITE', userInfo)"
     >
       {{
-        (userInfo.isFavorit ? 'group.unfavorite' : 'group.favorite') | translate
+        (userInfo.isFavorit ? 'group.unfavorite' : 'group.favorit') | translate
       }}
     </button>
     <button mat-menu-item (click)="onClickProfileContextMenu('CHAT', userInfo)">

From 7442a89c6ea7fb562699519c4d812b7490e35383 Mon Sep 17 00:00:00 2001
From: Richard Park <crusader@loafle.com>
Date: Mon, 13 Jan 2020 16:31:02 +0900
Subject: [PATCH 08/10] version is changed from 0.0.2 to 0.0.3

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index c343c25c..83b6e8f6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ucap-webmessenger",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "author": {
     "name": "LG CNS",
     "email": "lgucap@lgcns.com"

From a53f4961c9700cff3320d59f15b55d5e1b121e12 Mon Sep 17 00:00:00 2001
From: Richard Park <crusader@loafle.com>
Date: Mon, 13 Jan 2020 17:26:57 +0900
Subject: [PATCH 09/10] bug fixed

---
 .../src/app/layouts/native/components/top-bar.component.ts | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.ts
index c5a7eaf6..9693bab2 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.ts
@@ -163,13 +163,6 @@ export class TopBarComponent implements OnInit, OnDestroy {
       select(AppStore.SettingSelector.UpdateSelector.updateInfo)
     );
 
-    const appUserInfo = this.localStorageService.encGet<AppUserInfo>(
-      KEY_APP_USER_INFO,
-      environment.customConfig.appKey
-    );
-
-    this.zoom = appUserInfo.zoom;
-
     this.nativeService.getVersionInfo().then(ver => {
       this.appVersion = ver;
     });

From a92d373f40109da3d60df786eef7706e3ce21b88 Mon Sep 17 00:00:00 2001
From: khk <khk@gmail.com>
Date: Mon, 13 Jan 2020 18:01:51 +0900
Subject: [PATCH 10/10] =?UTF-8?q?=EB=94=94=EC=9E=A5=EC=9D=B8=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=EC=82=AC=ED=95=AD=20=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../message-detail.dialog.component.html        |  2 +-
 .../message-detail.dialog.component.scss        |  9 +++++----
 .../src/lib/components/list-item.component.html | 17 +++++++++++++----
 .../components/user-list-item.component.html    |  2 +-
 4 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.html
index 26ea44f6..ddce3dba 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.html
@@ -130,7 +130,7 @@
                 'common.file.errors.expired' | translate
               }}</span>
               <button
-                mat-stroked-button
+                mat-flat-button
                 class="mat-primary"
                 (click)="downloadAttachFileAll()"
               >
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.scss
index 83ee9fe3..bc7857ca 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.scss
@@ -109,7 +109,7 @@
     .ps {
       align-items: flex-start;
     }
- .attachFile {
+    .attachFile {
       border-top: 1px solid #dddddd;
       li {
         display: flex;
@@ -124,6 +124,7 @@
           white-space: nowrap;
           word-wrap: normal;
           overflow: hidden;
+          margin-right: 10px;
           span:last-child {
             overflow: hidden;
             text-overflow: ellipsis;
@@ -132,18 +133,18 @@
           }
         }
         .file-size {
-          display: inline-flex;
+          display: flex;
           margin-left: auto;
           align-self: flex-end;
           flex: 0 0 auto;
-          margin: 0 10px;
         }
         a {
           display: inline-block;
           width: 20px;
           height: 100%;
+          margin-left: 10px;
         }
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/projects/ucap-webmessenger-ui-message/src/lib/components/list-item.component.html b/projects/ucap-webmessenger-ui-message/src/lib/components/list-item.component.html
index 75a3957b..36daf520 100644
--- a/projects/ucap-webmessenger-ui-message/src/lib/components/list-item.component.html
+++ b/projects/ucap-webmessenger-ui-message/src/lib/components/list-item.component.html
@@ -49,15 +49,24 @@
       </span>
     </dt>
     <dd>
-      <mat-icon *ngIf="!!message.resType && message.resType === ContentType.Image">image</mat-icon>
-      <mat-icon *ngIf="!!message.resType && message.resType === ContentType.AttachFile">attach_file</mat-icon>
+      <mat-icon
+        *ngIf="!!message.resType && message.resType === ContentType.Image"
+        >image</mat-icon
+      >
+      <mat-icon
+        *ngIf="!!message.resType && message.resType === ContentType.AttachFile"
+        >attach_file</mat-icon
+      >
       {{ message.title }}
     </dd>
   </dl>
   <div class="date">
     <span>{{ message.regDate | ucapDate: 'MM:DD' }}</span>
-    <span *ngIf="message.type === MessageType.Receive && !message.readYn" class="badge-new bg-warn-darkest">
+    <span
+      *ngIf="message.type === MessageType.Receive && !message.readYn"
+      class="badge-new bg-warn-darkest"
+    >
       N
     </span>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html b/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html
index 34e02756..a4725c1f 100644
--- a/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html
+++ b/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html
@@ -1,5 +1,5 @@
 <!--체크박스 보여줄때는 <div class="list-item checkbox" matRipple>  클래스에 checkbox만 추가-->
-<div class="list-item" *ngIf="userInfo" matRipple>
+<div class="list-item checkbox" *ngIf="userInfo" matRipple>
   <!--pcOn , pcOut  pcOff , pcOther-->
   <span class="presence" [ngClass]="getPresence(PresenceType.PC)"> </span>
   <dl class="item-default">