From 749237b1bccf6efe579d97db76cfb3a9b256562c Mon Sep 17 00:00:00 2001
From: leejh <leejh@biztechpartners.co.kr>
Date: Thu, 31 Oct 2019 18:12:38 +0900
Subject: [PATCH 1/7] =?UTF-8?q?=EB=8C=80=ED=99=94=EB=B0=A9=20>=20=EC=9D=B4?=
 =?UTF-8?q?=EC=A0=84=20=EB=8C=80=ED=99=94=20=EB=B3=B4=EA=B8=B0=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=20=EA=B5=AC=ED=98=84.=20infinity=20scroll?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/messages.component.html        | 11 +++++-
 .../components/messages.component.ts          | 37 +++++++++++++++++--
 .../src/app/store/messenger/event/actions.ts  |  8 ++++
 .../src/app/store/messenger/event/effects.ts  | 27 ++++++++++----
 .../src/app/store/messenger/event/reducers.ts | 26 ++++++++++++-
 .../src/app/store/messenger/event/state.ts    |  8 +++-
 .../src/app/store/messenger/sync/effects.ts   |  3 +-
 .../src/lib/type/const.type.ts                | 10 +++++
 .../src/lib/type/maximum-range.type.ts        |  4 --
 .../ucap-webmessenger-core/src/public-api.ts  |  2 +-
 .../src/lib/protocols/info.ts                 |  5 +--
 .../lib/components/messages.component.html    |  3 ++
 .../src/lib/components/messages.component.ts  | 14 ++++++-
 13 files changed, 131 insertions(+), 27 deletions(-)
 create mode 100644 projects/ucap-webmessenger-core/src/lib/type/const.type.ts
 delete mode 100644 projects/ucap-webmessenger-core/src/lib/type/maximum-range.type.ts

diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
index 7a068900..8e3afbe1 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
@@ -19,7 +19,8 @@
         {{ getRoomName() }}
       </div>
       <div *ngIf="!!roomInfo && roomInfo.isTimeRoom">
-        <mat-icon>timer</mat-icon> {{ getConvertTimer(roomInfo.timeRoomInterval) }}
+        <mat-icon>timer</mat-icon>
+        {{ getConvertTimer(roomInfo.timeRoomInterval) }}
       </div>
       <div class="room-option">
         <button
@@ -73,13 +74,19 @@
     <!-- Timer Room Info -->
 
     <!-- CHAT MESSAGES -->
-    <perfect-scrollbar fxFlex="1 1 auto" #psChatContent>
+    <perfect-scrollbar
+      fxFlex="1 1 auto"
+      #psChatContent
+      (psYReachStart)="onScrollup($event)"
+    >
       <ucap-chat-messages
         [messages]="eventList$ | async"
         [eventInfoStatus]="eventInfoStatus$ | async"
+        [eventRemain]="eventRemain$ | async"
         [userInfos]="userInfoList"
         [loginRes]="loginRes"
         [sessionVerInfo]="sessionVerInfo"
+        (moreEvent)="onMoreEvent($event)"
         (massDetail)="onMassDetail($event)"
         (save)="onSave($event)"
         (imageViewer)="onImageViewer($event)"
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts
index 32b74255..008e7330 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts
@@ -58,7 +58,7 @@ import {
   ImageViewerDialogData,
   ImageViewerDialogResult
 } from '@app/layouts/common/dialogs/image-viewer.dialog.component';
-import { Maximum_Range } from '@ucap-webmessenger/core';
+import { CONST } from '@ucap-webmessenger/core';
 import { PerfectScrollbarComponent } from 'ngx-perfect-scrollbar';
 
 @Component({
@@ -83,12 +83,15 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked {
   loginRes: LoginResponse;
   loginResSubscription: Subscription;
   eventList$: Observable<Info[]>;
+  baseEventSeq = 0;
   roomInfo: RoomInfo;
   roomInfoSubscription: Subscription;
   userInfoList: UserInfo[];
   userInfoListSubscription: Subscription;
   eventListProcessing$: Observable<boolean>;
   eventInfoStatus$: Observable<InfoResponse>;
+  eventRemain$: Observable<boolean>;
+  eventRemain = false;
   sessionVerInfo: VersionInfo2Response;
 
   isRecalledMessage = isRecalled;
@@ -148,8 +151,20 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked {
       select(AppStore.MessengerSelector.EventSelector.infoListProcessing)
     );
 
+    this.eventRemain$ = this.store.pipe(
+      select(AppStore.MessengerSelector.EventSelector.remainInfo),
+      tap(remainInfo => {
+        this.eventRemain = remainInfo;
+      })
+    );
+
     this.eventList$ = this.store.pipe(
-      select(AppStore.MessengerSelector.EventSelector.selectAllInfoList)
+      select(AppStore.MessengerSelector.EventSelector.selectAllInfoList),
+      tap(infoList => {
+        if (!!infoList && infoList.length > 0) {
+          this.baseEventSeq = infoList[0].seq;
+        }
+      })
     );
 
     this.eventInfoStatus$ = this.store.pipe(
@@ -229,7 +244,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked {
       return;
     }
 
-    if (message.trim().length > Maximum_Range.MassText) {
+    if (message.trim().length > CONST.MASSTEXT_LEN) {
       // MASS TEXT
       this.store.dispatch(
         EventStore.sendMass({
@@ -260,6 +275,22 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked {
     this.store.dispatch(RoomStore.updateOnlyAlarm({ roomInfo: this.roomInfo }));
   }
 
+  onScrollup(event: any) {
+    this.onMoreEvent(this.baseEventSeq);
+  }
+  /** More Event */
+  onMoreEvent(seq: number) {
+    if (this.eventRemain) {
+      this.store.dispatch(
+        EventStore.info({
+          roomSeq: this.roomInfo.roomSeq,
+          baseSeq: seq,
+          requestCount: CONST.EVENT_INFO_READ_COUNT
+        })
+      );
+    }
+  }
+
   /** MassText Detail View */
   onMassDetail(value: number) {
     this.store.dispatch(
diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/event/actions.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/event/actions.ts
index d34019f3..a06301c8 100644
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/event/actions.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/event/actions.ts
@@ -29,6 +29,14 @@ export const infoSuccess = createAction(
   }>()
 );
 
+export const infoMoreSuccess = createAction(
+  '[Messenger::Event] Info More Success',
+  props<{
+    infoList: Info[];
+    res: InfoResponse;
+  }>()
+);
+
 export const infoFailure = createAction(
   '[Messenger::Event] Info Failure',
   props<{ error: any }>()
diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/event/effects.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/event/effects.ts
index a98800ea..e82da5aa 100644
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/event/effects.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/event/effects.ts
@@ -67,7 +67,8 @@ import {
   forwardFailure,
   forwardAfterRoomOpen,
   sendMass,
-  sendMassFailure
+  sendMassFailure,
+  infoMoreSuccess
 } from './actions';
 import { SessionStorageService } from '@ucap-webmessenger/web-storage';
 import {
@@ -81,6 +82,7 @@ import { openSuccess, openFailure } from '../room';
 import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
 import { KEY_LOGIN_RES_INFO } from '@app/types/login-res-info.type';
 import { StatusCode } from '@ucap-webmessenger/api';
+import { CONST } from '@ucap-webmessenger/core';
 
 @Injectable()
 export class Effects {
@@ -91,7 +93,7 @@ export class Effects {
         return info({
           roomSeq: action.roomSeq,
           baseSeq: 0,
-          requestCount: 50
+          requestCount: CONST.EVENT_INFO_READ_COUNT
         });
       })
     )
@@ -115,12 +117,21 @@ export class Effects {
                   break;
                 case SSVC_TYPE_EVENT_INFO_RES:
                   {
-                    this.store.dispatch(
-                      infoSuccess({
-                        infoList,
-                        res: res as InfoResponse
-                      })
-                    );
+                    if (req.baseSeq === 0) {
+                      this.store.dispatch(
+                        infoSuccess({
+                          infoList,
+                          res: res as InfoResponse
+                        })
+                      );
+                    } else {
+                      this.store.dispatch(
+                        infoMoreSuccess({
+                          infoList,
+                          res: res as InfoResponse
+                        })
+                      );
+                    }
 
                     if (req.baseSeq === 0) {
                       // 최초 이벤트 목록 조회시 SSVC_TYPE_EVENT_READ_REQ 수행.
diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/event/reducers.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/event/reducers.ts
index 39378335..ee6c3be2 100644
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/event/reducers.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/event/reducers.ts
@@ -6,10 +6,12 @@ import {
   info,
   infoFailure,
   recallInfoList,
-  delInfoList
+  delInfoList,
+  infoMoreSuccess
 } from './actions';
 import * as AuthenticationStore from '@app/store/account/authentication';
 import { Info, EventType } from '@ucap-webmessenger/protocol-event';
+import { CONST } from '@ucap-webmessenger/core';
 
 export const reducer = createReducer(
   initialState,
@@ -27,7 +29,27 @@ export const reducer = createReducer(
         ...state.infoList
       }),
       infoStatus: action.res,
-      infoListProcessing: false
+      infoListProcessing: false,
+      remainInfo:
+        !!action.infoList &&
+        action.infoList.length === CONST.EVENT_INFO_READ_COUNT
+          ? true
+          : false
+    };
+  }),
+  on(infoMoreSuccess, (state, action) => {
+    return {
+      ...state,
+      infoList: adapterInfoList.upsertMany(action.infoList, {
+        ...state.infoList
+      }),
+      infoStatus: action.res,
+      infoListProcessing: false,
+      remainInfo:
+        !!action.infoList &&
+        action.infoList.length === CONST.EVENT_INFO_READ_COUNT
+          ? true
+          : false
     };
   }),
 
diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/event/state.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/event/state.ts
index fe1cc060..e799ee2c 100644
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/event/state.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/event/state.ts
@@ -8,6 +8,7 @@ export interface State {
   infoListProcessing: boolean;
   infoList: InfoListState;
   infoStatus: InfoResponse | null;
+  remainInfo: boolean;
 }
 
 export const adapterInfoList = createEntityAdapter<Info>({
@@ -22,7 +23,8 @@ const infoListInitialState: InfoListState = adapterInfoList.getInitialState({});
 export const initialState: State = {
   infoListProcessing: false,
   infoList: infoListInitialState,
-  infoStatus: null
+  infoStatus: null,
+  remainInfo: false
 };
 
 const {
@@ -43,6 +45,10 @@ export function selectors<S>(selector: Selector<any, State>) {
       selector,
       (state: State) => state.infoListProcessing
     ),
+    remainInfo: createSelector(
+      selector,
+      (state: State) => state.remainInfo
+    ),
     infoList: createSelector(
       selector,
       (state: State) => state.infoList
diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/sync/effects.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/sync/effects.ts
index cc5add6d..a9938e06 100644
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/sync/effects.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/sync/effects.ts
@@ -101,6 +101,7 @@ import {
 
 import * as ChatStore from '@app/store/messenger/chat';
 import * as RoomStore from '@app/store/messenger/room';
+import { CONST } from '@ucap-webmessenger/core';
 
 @Injectable()
 export class Effects {
@@ -405,7 +406,7 @@ export class Effects {
                   divCd: 'DivCodeT',
                   roomName: '',
                   isTimerRoom: true,
-                  timerRoomInterval: 24 * 60 * 60, // 24h default
+                  timerRoomInterval: CONST.DEFAULT_TIMER_ROOM_INTERVAL, // 24h default
                   userSeqs: userSeqList
                 }
               })
diff --git a/projects/ucap-webmessenger-core/src/lib/type/const.type.ts b/projects/ucap-webmessenger-core/src/lib/type/const.type.ts
new file mode 100644
index 00000000..0e94076c
--- /dev/null
+++ b/projects/ucap-webmessenger-core/src/lib/type/const.type.ts
@@ -0,0 +1,10 @@
+export enum CONST {
+  /** 대용량 텍스트로 보내는 문자열의 길이 기준 */
+  MASSTEXT_LEN = 800,
+  /** 대화방의 이벤트를 조회하는 개수 */
+  EVENT_INFO_READ_COUNT = 50,
+  /** Timer Room 최초 오픈시 timer interval */
+  DEFAULT_TIMER_ROOM_INTERVAL = 24 * 60 * 60,
+  /** 한번에 채팅을 할 수 있는 인원수 제한 */
+  CHATROOM_USER = 300
+}
diff --git a/projects/ucap-webmessenger-core/src/lib/type/maximum-range.type.ts b/projects/ucap-webmessenger-core/src/lib/type/maximum-range.type.ts
deleted file mode 100644
index ad1c7d03..00000000
--- a/projects/ucap-webmessenger-core/src/lib/type/maximum-range.type.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export enum Maximum_Range {
-  MassText = 800,
-  ChatRoom = 300
-}
diff --git a/projects/ucap-webmessenger-core/src/public-api.ts b/projects/ucap-webmessenger-core/src/public-api.ts
index e02f3957..530adf92 100644
--- a/projects/ucap-webmessenger-core/src/public-api.ts
+++ b/projects/ucap-webmessenger-core/src/public-api.ts
@@ -7,12 +7,12 @@ export * from './lib/type/call-alarm.type';
 export * from './lib/type/call-forward.type';
 export * from './lib/type/call-mode.type';
 export * from './lib/type/caller-type.type';
+export * from './lib/type/const.type';
 export * from './lib/type/default-screen.type';
 export * from './lib/type/device-devision.type';
 export * from './lib/type/device-type.type';
 export * from './lib/type/file-transfer-permissions.type';
 export * from './lib/type/locale-code.type';
-export * from './lib/type/maximum-range.type';
 export * from './lib/type/notification-method.type';
 export * from './lib/type/organization-chart-permissions.type';
 export * from './lib/type/push-type.type';
diff --git a/projects/ucap-webmessenger-protocol-event/src/lib/protocols/info.ts b/projects/ucap-webmessenger-protocol-event/src/lib/protocols/info.ts
index 9c3c9d9a..397c693b 100644
--- a/projects/ucap-webmessenger-protocol-event/src/lib/protocols/info.ts
+++ b/projects/ucap-webmessenger-protocol-event/src/lib/protocols/info.ts
@@ -35,8 +35,6 @@ export interface InfoResponse extends ProtocolResponse {
   baseSeq: number;
   // 유효한파일기준이벤트SEQ(n)
   validFileBaseSeq: number;
-  // 이벤트정보 개수(n)
-  count: number;
 }
 
 export const encodeInfo: ProtocolEncoder<InfoRequest> = (req: InfoRequest) => {
@@ -82,7 +80,6 @@ export const decodeInfo: ProtocolDecoder<InfoResponse> = (
   return decodeProtocolMessage(message, {
     roomSeq: message.bodyList[0],
     baseSeq: message.bodyList[1],
-    validFileBaseSeq: message.bodyList[2],
-    count: message.bodyList[3]
+    validFileBaseSeq: message.bodyList[2]
   } as InfoResponse);
 };
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html
index 4def8769..e0a507d8 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html
@@ -1,4 +1,7 @@
 <div class="chat-messages">
+  <!-- <div class="message-row" *ngIf="eventRemain">
+    <button mat-button (click)="onClickMore($event)">이전 대화 보기</button>
+  </div> -->
   <!-- MESSAGE -->
   <div
     *ngFor="let message of messages; let i = index"
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts
index d3d43a79..85c06a0b 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts
@@ -1,3 +1,4 @@
+import { CONST } from '@ucap-webmessenger/core';
 import {
   Component,
   OnInit,
@@ -32,17 +33,20 @@ export class MessagesComponent implements OnInit {
   @Input()
   eventInfoStatus?: InfoResponse;
   @Input()
+  eventRemain: boolean;
+  @Input()
   userInfos?: UserInfo[];
   @Input()
   sessionVerInfo: VersionInfo2Response;
 
+  @Output()
+  moreEvent = new EventEmitter<number>();
   @Output()
   massDetail = new EventEmitter<number>();
   @Output()
   imageViewer = new EventEmitter<FileInfo>();
   @Output()
   save = new EventEmitter<{ fileInfo: FileInfo; type: string }>();
-
   @Output()
   contextMenu = new EventEmitter<{
     event: MouseEvent;
@@ -50,6 +54,7 @@ export class MessagesComponent implements OnInit {
   }>();
 
   EventType = EventType;
+  CONST = CONST;
   profileImageRoot: string;
 
   constructor(private logger: NGXLogger, private datePipe: DatePipe) {}
@@ -138,6 +143,13 @@ export class MessagesComponent implements OnInit {
     return false;
   }
 
+  onClickMore(event: any) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    this.moreEvent.emit(this.messages[0].seq);
+  }
+
   /** [Event] MassTalk Detail View */
   onMassDetail(value: number) {
     this.massDetail.emit(value);

From 35a3292ddb6100d73e9676edaa3a0f3f440c50f2 Mon Sep 17 00:00:00 2001
From: khk <kanghk@biztechpartners.co.kr>
Date: Thu, 31 Oct 2019 19:17:29 +0900
Subject: [PATCH 2/7] =?UTF-8?q?=EB=94=94=EC=9E=90=EC=9D=B8=20=EB=A0=88?=
 =?UTF-8?q?=EC=9D=B4=EC=95=84=EC=9B=83=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/left-side.component.html       |   2 +-
 .../components/left-side.component.scss       |   4 +
 .../left-sidenav/chat.component.html          |  17 +-
 .../left-sidenav/chat.component.scss          | 124 ++++---
 .../left-sidenav/group.component.html         |  10 +-
 .../left-sidenav/group.component.scss         |  13 +
 .../left-sidenav/group.component.ts           |   1 -
 .../left-sidenav/organization.component.html  |   4 +-
 .../left-sidenav/organization.component.scss  |  45 +--
 .../components/messages.component.scss        | 338 ++++++++++++++----
 .../chat/create-chat.dialog.component.html    |   5 +-
 .../chat/create-chat.dialog.component.scss    |  14 +-
 .../message-box/attach-file.component.html    |   2 +-
 .../message-box/attach-file.component.scss    |   9 +
 .../lib/components/messages.component.scss    |   7 +-
 .../components/expansion-panel.component.html |   8 +-
 .../components/expansion-panel.component.scss |  20 +-
 .../components/tenant-search.component.html   |  23 +-
 .../components/tenant-search.component.scss   |   8 +-
 .../src/lib/components/tree.component.scss    |  19 +-
 .../lib/components/list-item.component.html   |  13 +-
 .../lib/components/list-item.component.scss   |  29 +-
 .../src/assets/scss/partials/_list-item.scss  |   7 +
 23 files changed, 516 insertions(+), 206 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html
index 0358f4a2..3784e5ce 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html
@@ -11,7 +11,7 @@
       <ng-template mat-tab-label>
         <mat-icon>group</mat-icon>
       </ng-template>
-      <app-layout-chat-left-sidenav-group></app-layout-chat-left-sidenav-group>
+      <app-layout-chat-left-sidenav-group class="left-group-side"></app-layout-chat-left-sidenav-group>
     </mat-tab>
     <mat-tab>
       <ng-template mat-tab-label>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.scss
index 015d4278..fc656cfe 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.scss
@@ -49,3 +49,7 @@
     }
   }
 }
+.left-group-side{
+ position: relative;
+ height:100%;
+}
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html
index dd59b29c..ab79e495 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html
@@ -32,7 +32,18 @@
       </button>
     </mat-form-field>
   </form>-->
-
+<div>
+  <div class="current-head">
+    <h3>대화</h3>
+    <div class="btn-box">
+      <button mat-icon-button>
+        <mat-icon>timer</mat-icon>
+      </button>
+      <button mat-icon-button>
+        <mat-icon> add_comment</mat-icon>
+      </button>
+    </div>
+  </div>
 <div class="list-search">
   <div class="searchbox">
     <form [formGroup]="fgSearch" class="w-100-p">
@@ -65,7 +76,7 @@
 <div
   *ngIf="!isSearch"
   class="app-layout-chat-left-sidenav-chat-list"
-  perfectScrollbar
+ 
 >
   <ucap-room-list-item
     *ngFor="let room of roomList"
@@ -96,7 +107,7 @@
 <div
   *ngIf="!!isSearch"
   class="app-layout-chat-left-sidenav-chat-list search"
-  perfectScrollbar
+
 >
   <ucap-room-list-item
     *ngFor="let room of searchRoomList"
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.scss
index b0492594..6ac50a90 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.scss
@@ -1,3 +1,69 @@
+.current-head{
+  display: flex;
+  justify-content: center;
+  padding: 0 10px;
+  height: 60px;
+  h3{
+   display: inline-flex;
+   padding-left: 10px;
+    align-items: center;
+  }
+  .btn-box{
+    height: 100%;
+    margin-left: auto;
+    display: inline-flex;
+    align-items: center;
+  }
+}
+
+.list-search {
+  display: flex;
+  flex-direction: row;
+  height: 60px;
+  align-items: center;
+  padding: 0;
+  font-size: 14px;
+  border-bottom: 1px solid #dddddd;
+  .searchbox{
+    width:100%;
+    height:100%;
+  }
+}
+::ng-deep .searchbox{
+  .mat-form-field{
+    display:block;
+    .mat-form-field-wrapper{
+      padding: 0;
+      padding-bottom:0 !important;
+      height: 100%;
+      .mat-form-field-flex{
+        height: 59px;
+        padding:0 20px;
+        align-items: center;
+        .mat-form-field-infix{
+          width:100%;
+          font-size:14px;
+          border:none;
+        }
+        .mat-form-field-suffix{
+          .mat-icon{
+            line-height:24px;
+          }
+        }
+      }
+    }
+  }
+  .mat-form-field-appearance-legacy{
+    .mat-form-field-wrapper{
+      padding: 0;
+    }
+    .mat-form-field-underline{
+      bottom:0;
+      background-color: unset !important;
+    }
+  }
+}
+
 .app-layout-chat-left-sidenav-chat-header {
   width: 100%;
   height: 50px;
@@ -10,60 +76,4 @@
 .app-layout-chat-left-sidenav-chat-list-viewport {
   width: 100%;
   height: 100%;
-}
-
-.room-name {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-
-.list-search {
-  display: flex;
-  flex-direction: row;
-  height: 60px;
-  align-items: center;
-  padding: 0;
-  font-size: 14px;
-  border-bottom: 1px solid #dddddd;
-  .searchbox{
-    width:100%;
-    .mat-form-field{
-      display:block;
-      .mat-form-field-wrapper{
-        padding-bottom:0 !important;
-        height: 60px;
-
-    }
-   }
-  }
-}
-::ng-deep .searchbox .mat-form-field-flex{
-      height: 60px;
-      padding:0 10px;
-}
-::ng-deep .searchbox .mat-form-field-appearance-legacy .mat-form-field-wrapper{
-  padding: 0;
-}
-::ng-deep .searchbox .mat-form-field-appearance-legacy .mat-form-field-underline{
-  bottom:0;
-  background-color: #cccccc !important;
-}
-/*.searchbox {
-    width: 100%;
-    display: flex;
-    input {
-      display: inline-flex;
-      width: 100%;
-      font-size: 14px;
-      padding-left: 0;
-    }
-    .btn-search {
-      color: #777777;
-      font-size: 12px;
-      display: inline-flex;
-      margin-left: auto;
-      flex: none;
-    }
-  }*/
\ No newline at end of file
+}
\ No newline at end of file
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 b7a2f1bb..fff2e121 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
@@ -1,4 +1,4 @@
-<div>
+
   <div>
     <div class="current-head">
       <h3>그룹</h3>
@@ -52,7 +52,7 @@
       </button>
     </mat-menu>
   </div>
-  <div *ngIf="!isShowSearch">
+  <div *ngIf="!isShowSearch" class="search-result" style="overflow: auto;">
     <ucap-group-expansion-panel
       #groupExpansionPanel
       [groupBuddyList]="groupBuddyList$ | async"
@@ -71,11 +71,11 @@
       </ucap-profile-user-list-item>
     </ucap-group-expansion-panel>
   </div>
-  <div *ngIf="isShowSearch">
+  <div *ngIf="isShowSearch" class="search-result">
     <div *ngIf="searchProcessing">
       <mat-progress-bar mode="indeterminate"></mat-progress-bar>
     </div>
-    <div>검색결과({{ searchUserInfos.length }}명)</div>
+    <div class="result-num">검색결과<span class="text-accent-color">({{ searchUserInfos.length }}명)</span></div>
     <ucap-profile-user-list-item
       *ngFor="let userInfo of searchUserInfos"
       [userInfo]="userInfo"
@@ -85,7 +85,7 @@
     >
     </ucap-profile-user-list-item>
   </div>
-</div>
+
 
 <div
   style="visibility: hidden; position: fixed"
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.scss
index 5f8d2020..b28f012d 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.scss
@@ -18,3 +18,16 @@
     }
   }
 }
+.search-result {
+  height: calc(100% - 120px);
+  overflow: auto;
+  .result-num {
+    padding: 10px;
+    display: flex;
+    height: 40px;
+  }
+}
+::ng-deep .mat-tab-body-content {
+  height: 100%;
+  overflow: unset;
+}
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.ts
index d069c7c7..c823041b 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.ts
@@ -170,7 +170,6 @@ export class GroupComponent implements OnInit, OnDestroy {
             CreateChatDialogResult
           >(CreateChatDialogComponent, {
             width: '600px',
-            height: '700px',
             data: {
               type: UserSelectDialogType.NewGroup,
               title: 'New Group'
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html
index 9b8572d9..44ab06ee 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html
@@ -10,8 +10,7 @@
     ></ucap-organization-tree>
   </div>
   <div class="select-list ">
-    <div class="select-dept text-accent-color">
-      <dl>
+      <dl class="select-dept text-accent-color">
         <dt>
           {{ getSelectedDepartmentName() }}
         </dt>
@@ -25,7 +24,6 @@
           </mat-checkbox>
         </dd>
       </dl>
-    </div>
     <div *ngIf="selectedDepartmentProcessing">
       <mat-progress-bar mode="indeterminate"></mat-progress-bar>
     </div>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.scss
index 0f24738c..dd444aaa 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.scss
@@ -16,16 +16,17 @@
 }
 
 
-  .oraganization-tab {
-    height: 100%;
-    flex-direction: inherit;
-    display: flex;
-    .oraganization-tab-tree {
-      height:40%;
-      overflow-y: auto;
-      }
+.oraganization-tab {
+  height: 100%;
+  flex-direction: inherit;
+  display: flex;
+  .oraganization-tab-tree {
+    height:40%;
+    overflow-y: auto;
   }
+}
 
+//팝업에 있는 조직도
 .mat-card-content{
   .mat-tab-body-content{
     .oraganization-box{
@@ -37,34 +38,24 @@
   }
 }
 
-.btn-box{
-  height:100px;
-  position: absolute;
-  bottom:0;
-  border-top:1px solid #ddd;
-  align-items: center;
-  width:100%;
-  background-color:#ffffff;
-}
-
 .select-list{
   height:60%;
   border-top:1px solid #dddddd;
   .select-dept{
-    padding:0 10px;
+    padding:0 20px;
     height:40px;
     line-height:40px;
-    .dept-name{
-      border-top:1px solid #dddddd;
-      height:40px;
-      width:100%;
-      display:inline-flex;
-      align-items: center;
-      padding:0 10px;
+    display:flex;
+    background-color: #f9f9f9;
+    dt{
+
+    }
+    dd{
+      margin-left:auto;
     }
   }
   .search-list{
-    height: calc(100% - 140px);
+    height: calc(100% - 40px);
     overflow: auto;
     .list-item{
       height:70px;
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss
index 554f144a..0e64a9f6 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss
@@ -1,82 +1,278 @@
-@charset 'utf-8';
-$line-basic: 1px solid #dddddd;
-@mixin ellipsis($row) {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  @if $row == 1 {
-    display: block;
-    white-space: nowrap;
-    word-wrap: normal;
-  } @else if $row >= 2 {
-    display: -webkit-box;
-    -webkit-line-clamp: $row;
-    -webkit-box-orient: vertical;
-    word-wrap: break-word;
+/*.chat-messages {
+  position: relative;
+  padding: 16px 40px;
+
+  .message-row {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-end;
+    padding: 0 16px 4px 16px;
+
+    .avatar {
+      position: absolute;
+      left: -32px;
+      margin: 0;
+    }
+
+    .bubble {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 12px;
+      max-width: 100%;
+
+      .message {
+        white-space: pre-wrap;
+        line-height: 1.2;
+      }
+
+      .time {
+        position: absolute;
+        display: none;
+        width: 100%;
+        font-size: 11px;
+        margin-top: 8px;
+        top: 100%;
+        left: 0;
+        white-space: nowrap;
+      }
+    }
+
+    &.contact {
+      .bubble {
+        border-top-left-radius: 5px;
+        border-bottom-left-radius: 5px;
+
+        border-top-right-radius: 20px;
+        border-bottom-right-radius: 20px;
+
+        .time {
+          margin-left: 12px;
+        }
+      }
+
+      &.first-of-group {
+        .bubble {
+          border-top-left-radius: 20px;
+        }
+      }
+
+      &.last-of-group {
+        .bubble {
+          border-bottom-left-radius: 20px;
+        }
+      }
+    }
+
+    &.me {
+      padding-left: 40px;
+
+      .avatar {
+        order: 2;
+        margin: 0 0 0 16px;
+      }
+
+      .bubble {
+        margin-left: auto;
+
+        border-top-left-radius: 20px;
+        border-bottom-left-radius: 20px;
+
+        border-top-right-radius: 5px;
+        border-bottom-right-radius: 5px;
+
+        .time {
+          justify-content: flex-end;
+          right: 0;
+          margin-right: 12px;
+        }
+      }
+
+      &.first-of-group {
+        .bubble {
+          border-top-right-radius: 20px;
+        }
+      }
+
+      &.last-of-group {
+        .bubble {
+          border-bottom-right-radius: 20px;
+        }
+      }
+    }
+
+    &.contact + .me,
+    &.me + .contact {
+      padding-top: 20px;
+      margin-top: 20px;
+    }
+
+    &.first-of-group {
+      .bubble {
+        border-top-left-radius: 20px;
+        padding-top: 13px;
+      }
+    }
+
+    &.last-of-group {
+      .bubble {
+        border-bottom-left-radius: 20px;
+        padding-bottom: 13px;
+
+        .time {
+          display: flex;
+        }
+      }
+    }
   }
 }
-:host {
+*/
+$otherBox-line: #cccccc;
+$otherBox-bg: #ffffff;
+$meBox-line: #cccccc;
+$meBox-bg: #ffffff;
+
+.chat-messages {
+  padding: 30px 40px;
   display: flex;
+  flex-direction: column;
+}
+.information-msg {
   width: 100%;
   height: 100%;
-  flex: 1;
+  text-align: center;
+  background-color: #dddddd;
+  padding: 10px;
+  margin: 10px 0;
+}
 
-  .container {
+.message-row {
+  margin-bottom: 20px;
+  .date-splitter {
+    display: block;
     width: 100%;
-    height: 100%;
-
-    .chat-toolbar {
-      height: 70px;
-      min-height: 70px;
-      border-bottom: $line-basic;
-      background-color: #ffffff;
-      .chat-header {
-        width: 100%;
-        .responsive-chats-button {
-          padding: 0;
-          width: 40px;
-          height: 40px;
-          border-radius: 50%;
-          background-color: #252525;
-          color: #efefef;
-          font-size: 16px;
-          font-weight: 100;
-          line-height: 40px;
-        }
-        .room-name {
-          font-size: 16px;
-          padding: 0 10px;
-          @include ellipsis(1);
-        }
-        .room-option {
-          width: 100px;
-          margin-left: auto;
-        }
-      }
-    }
-
-    .chat-content {
-      position: relative;
-      background: transparent;
-      overflow: auto;
-      -webkit-overflow-scrolling: touch;
-
-      .file-drop-zone-container {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background-color: rgba(255, 255, 255, 0.95);
-
-        .file-drop-zone {
-          position: absolute;
-
-          top: 10%;
-          left: 10%;
-          width: 80%;
-          height: 80%;
-        }
+    margin-bottom: 10px;
+  }
+  .chat-row {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    .profile-img {
+      flex: 0 0 auto;
+      img{
+        border-radius: 50%;
       }
     }
   }
+  &.me {
+    .chat-row {
+      flex-direction: row-reverse;
+      .profile-info {
+        flex-direction: row-reverse;
+        display: flex;
+        justify-content: flex-end;
+      }
+    }
+  }
+
+  .message-main {
+    margin-left: 20px;
+    margin-right: 10px;
+    .chat-name {
+      font-size: 12px;
+      color: #333333;
+      margin-bottom: 6px;
+    }
+    .bubble {
+      border: 1px solid $otherBox-line;
+      font-weight: 900;
+      position: relative;
+      background-color: $otherBox-bg;
+      border-radius: 4px;
+      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
+      &:before {
+        content: '';
+        width: 0px;
+        height: 0px;
+        position: absolute;
+        border-left: 6px solid transparent;
+        border-right: 6px solid $otherBox-line;
+        border-top: 6px solid $otherBox-line;
+        border-bottom: 6px solid transparent;
+        left: -12px;
+        top: 4px;
+      }
+      &:after {
+        content: '';
+        width: 0px;
+        height: 0px;
+        position: absolute;
+        border-left: 6px solid transparent;
+        border-right: 6px solid $otherBox-bg;
+        border-top: 6px solid $otherBox-bg;
+        border-bottom: 6px solid transparent;
+        left: -10px;
+        top: 5px;
+      }
+    }
+  }
+  .secondary-text {
+    align-self: flex-end;
+    font-size: 11px;
+    color: #666666;
+    word-wrap: break-word;
+    white-space: nowrap;
+  }
+  &.me {
+    .secondary-text {
+      text-align: end;
+    }
+  }
+}
+
+.message-row.me > .bubble {
+  border: 1px solid $meBox-line;
+  background-color: $meBox-bg;
+}
+.message-row.me {
+  .profile-img {
+    display: none;
+  }
+  .chat-name {
+    display: none;
+  }
+  .message-main {
+    text-align: right;
+    margin-left: 10px;
+    margin-right: 20px;
+    & .bubble:before {
+      content: '';
+      width: 0px;
+      height: 0px;
+      position: absolute;
+      border-left: 6px solid $meBox-line;
+      border-right: 6px solid transparent;
+      border-top: 6px solid $meBox-line;
+      border-bottom: 6px solid transparent;
+      left: initial;
+      right: -12px;
+      top: 4px;
+    }
+    & .bubble:after {
+      content: '';
+      width: 0px;
+      height: 0px;
+      position: absolute;
+      border-left: 6px solid $meBox-bg;
+      border-right: 6px solid transparent;
+      border-top: 6px solid $meBox-bg;
+      border-bottom: 6px solid transparent;
+      left: initial;
+      right: -10px;
+      top: 5px;
+    }
+  }
 }
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.html
index 4460c97b..eaa233e9 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.html
@@ -55,6 +55,7 @@
                   [selectedUserList]="selectedUserList"
                   [checkable]="true"
                   (checkGroup)="onCheckGroup($event)"
+                  class="group-expansion"
                 >
                   <ucap-profile-user-list-item
                     *ucapGroupExpansionPanelItem="let userInfo"
@@ -68,11 +69,11 @@
                   </ucap-profile-user-list-item>
                 </ucap-group-expansion-panel>
               </div>
-              <div *ngIf="isShowSearch">
+              <div *ngIf="isShowSearch" class="search-result">
                 <div *ngIf="searchProcessing">
                   <mat-progress-bar mode="indeterminate"></mat-progress-bar>
                 </div>
-                <div>검색결과({{ searchUserInfos.length }}명)</div>
+                <div class="result-num">검색결과 <span class="text-accent-color">({{ searchUserInfos.length }}명)</span></div>
                 <ucap-profile-user-list-item
                   *ngFor="let userInfo of searchUserInfos"
                   [userInfo]="userInfo"
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.scss
index d064d753..2c156946 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.scss
@@ -2,6 +2,7 @@
   margin: 0;
 }
 
+//조직도 레이아웃 변경
 ::ng-deep .dialog-org {
   .oraganization-tab {
     width: 100%;
@@ -43,7 +44,7 @@
 .confirm-card {
   min-width: 500px;
   .mat-card-header {
-    margin-bottom: 20px;
+    margin-bottom: 10px;
     .mat-card-header-text {
       .mat-card-title {
         margin: 0 -16px;
@@ -67,6 +68,11 @@
   height: 380px;
 }
 .list-panel{
-     overflow: auto;
-     height: calc(100% - 60px);
-  }
\ No newline at end of file
+  overflow: auto;
+  height: calc(100% - 60px);
+  .group-expansion{
+     .list-item{
+      height:70px;
+     }
+  }
+}
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.html
index 5e32753b..9391c7ce 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.html
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.html
@@ -17,7 +17,7 @@
   </ul>
 </div>
 <div class="btn-box">
-  <ul *ngIf="expired">
+  <ul *ngIf="expired" class="expired">
     <li>기간이 만료된 파일입니다.</li>
   </ul>
   <ul *ngIf="!expired && fileInfo && fileInfo.AttSEQ">
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.scss
index a3979d30..a1758367 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.scss
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.scss
@@ -102,5 +102,14 @@
         height: 100%;
       }
     }
+    &.expired{
+      li{
+        width:100%;
+        white-space: nowrap;
+        color:#999999;
+        align-items: center;
+        line-height:40px;
+      }
+    }
   }
 }
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.scss
index 4fdbc36e..0e64a9f6 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.scss
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.scss
@@ -144,13 +144,13 @@ $meBox-bg: #ffffff;
   width: 100%;
   height: 100%;
   text-align: center;
-  background-color: #cccccc;
+  background-color: #dddddd;
   padding: 10px;
   margin: 10px 0;
 }
 
 .message-row {
-  margin-bottom: 30px;
+  margin-bottom: 20px;
   .date-splitter {
     display: block;
     width: 100%;
@@ -162,6 +162,9 @@ $meBox-bg: #ffffff;
     flex-direction: row;
     .profile-img {
       flex: 0 0 auto;
+      img{
+        border-radius: 50%;
+      }
     }
   }
   &.me {
diff --git a/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html b/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html
index f954f928..da6da3b0 100644
--- a/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html
+++ b/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html
@@ -46,10 +46,10 @@
     class="groupExpansionPanel"
   >
     <mat-expansion-panel-header>
-      <mat-panel-title
-        >{{ groupBuddy.group.name }}
-        <span>({{ groupBuddy.buddyList.length }}명)</span></mat-panel-title
-      >
+      <mat-panel-title class="panel-title">
+        <div class="title-name ellipsis">{{ groupBuddy.group.name }}</div>
+        <span class="text-accent-color number">({{ groupBuddy.buddyList.length }}명)</span>
+        </mat-panel-title>
       <mat-panel-description>
         <span class="more-spacer"></span>
         <button
diff --git a/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.scss b/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.scss
index d85de310..0891b625 100644
--- a/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.scss
+++ b/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.scss
@@ -38,6 +38,18 @@
     .mat-content {
       color: #666666;
       overflow: unset;
+      .panel-title{
+        display:inline-flex;
+        .title-name{
+          display:inline-flex;
+          flex:1 1 auto;
+        }
+        .number{
+          margin-left:6px;
+          display: inline-flex;
+          flex: 0 0 auto;
+        }
+      }
     }
   }
 }
@@ -47,4 +59,10 @@
 
 ::ng-deep .mat-content{
   overflow: unset;
-}
\ No newline at end of file
+}
+
+.number{
+          margin-left:6px;
+          display: inline-flex;
+          flex: 0 0 auto;
+        }
\ No newline at end of file
diff --git a/projects/ucap-webmessenger-ui-organization/src/lib/components/tenant-search.component.html b/projects/ucap-webmessenger-ui-organization/src/lib/components/tenant-search.component.html
index d9ee6f40..7c7f5586 100644
--- a/projects/ucap-webmessenger-ui-organization/src/lib/components/tenant-search.component.html
+++ b/projects/ucap-webmessenger-ui-organization/src/lib/components/tenant-search.component.html
@@ -1,4 +1,4 @@
-<div class="list-search">
+<!--<div class="list-search">
   <div class="selectbox">
     <mat-select [(value)]="companyCode">
       <mat-option
@@ -28,8 +28,27 @@
       </button>
     </div>
   </div>
-</div>
+</div>-->
+<div class="list-search">
+  <div class="selectbox">
+  <!--<mat-label>회사선택</mat-label>-->
+  <mat-select [(value)]="companyCode">
+  <mat-option *ngFor="let company of companyList" [value]="company.companyCode">
+    {{ company.companyName }}
+  </mat-option>
+</mat-select>
 
+</div>
+<div class="searchbox">
+<mat-form-field floatLabel="never" style="width:100%;">
+  <input matInput #searchWordInput placeholder="name" (keydown.enter)="onKeyDownEnter(searchWordInput.value)" />
+  <button mat-button matSuffix mat-icon-button aria-label="Clear"
+    (click)="inputSearch.value = ''; onClickSearchCancel()">
+    <mat-icon>close</mat-icon>
+  </button>
+</mat-form-field>
+</div>
+</div>
 <!--검색창만 있는 경우--------------------------------------------------------------------------
 <div class="list-search">
   <div class="searchbox">
diff --git a/projects/ucap-webmessenger-ui-organization/src/lib/components/tenant-search.component.scss b/projects/ucap-webmessenger-ui-organization/src/lib/components/tenant-search.component.scss
index 213369c8..e76c6db1 100644
--- a/projects/ucap-webmessenger-ui-organization/src/lib/components/tenant-search.component.scss
+++ b/projects/ucap-webmessenger-ui-organization/src/lib/components/tenant-search.component.scss
@@ -15,13 +15,19 @@
 .list-search {
   display: flex;
   flex-direction: row;
+  position: relative;
   height: 60px;
   align-items: center;
   padding: 0 10px 0 20px;
   font-size: 14px;
   border-bottom: 1px solid #dddddd;
+  .selectbox {
+    display: inline-flex;
+    width: 38%;
+    margin-right: 2%;
+  }
   .searchbox {
-    width: 100%;
+    width: 60%;
     display: flex;
     input {
       display: inline-flex;
diff --git a/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.scss b/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.scss
index 0c80d950..fc9e2ffb 100644
--- a/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.scss
+++ b/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.scss
@@ -47,14 +47,15 @@
   line-height: 20px;
   margin-right:10px;
   .mat-icon-rtl-mirror{
-      border: 1px solid #dddddd;
-      padding: 2px;
-      font-size: 14px;
-      min-width: 14px;
-      min-height: 14px;
-      line-height: 14px;
-      width:20px;
-      height:20px;
-      box-shadow: 0 1px 4px rgba(32, 33, 36, 0.1);
+    border: 1px solid #dddddd;
+    padding: 2px;
+    font-size: 14px;
+    min-width: 14px;
+    min-height: 14px;
+    line-height: 14px;
+    width:20px;
+    height:20px;
+    box-shadow: 0 2px 1px rgba(48, 48, 48, 0.2);
+    border-radius: 50%;
   }
 }
diff --git a/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html b/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html
index 93e87030..91e282d6 100644
--- a/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html
+++ b/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html
@@ -9,6 +9,9 @@
         [path]="imagePath"
         [default]="defaultPath"
       />
+      <span *ngIf="roomInfo.isTimeRoom" class="badge-timer">
+          <mat-icon>timer</mat-icon>
+      </span>
       <!-- <ucap-ui-imaage
         [imageClass]="'thumbnail'"
         [base]="sessionVerinfo.profileRoot"
@@ -20,14 +23,16 @@
       <div class="detail">
         <div class="room-name">
           <div class="name">{{ getRoomName(roomInfo) }}</div>
-          <div class="num" *ngIf="roomInfo.roomType === RoomType.Multi">
+          <div class="num text-accent-color"  *ngIf="roomInfo.roomType === RoomType.Multi">
             {{ roomInfo.joinUserCount }}명
           </div>
           <div *ngIf="!checkable && !roomInfo.receiveAlarm">
             <mat-icon>notifications_off</mat-icon>
           </div>
         </div>
-        <div class="room-msg">{{ finalEventMessage }}</div>
+        <div class="room-msg">
+          {{ finalEventMessage }}
+        </div>
       </div>
 
       <div class="date">
@@ -44,9 +49,7 @@
       </mat-checkbox>
     </dd>
   </dl>
-  <span *ngIf="roomInfo.isTimeRoom">
-    <mat-icon>timer</mat-icon>
-  </span>
+
   <span
     class="notiBadge"
     *ngIf="roomInfo.noReadCnt > 0"
diff --git a/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss b/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss
index 6d71c54c..0bbc8f8e 100644
--- a/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss
+++ b/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss
@@ -3,9 +3,8 @@ $font-dark: #212121;
 $font-mid: #666666;
 $font-light: #848d95;
 $font-white: #ffffff;
-$line-basic:1px solid #dddddd;
+$line-basic: 1px solid #dddddd;
 $bg-list-hover: #efefef;
-$color-main:#e53096;
 $listH-row2: 80px;
 $presence-size: 8px;
 $thumbnail-msize: 40px;
@@ -25,6 +24,24 @@ $thumbnail-msize: 40px;
   }
 }
 
+.badge-timer {
+  position:absolute;
+  background-color: #ffffff;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  bottom: 14px;
+  left: 46px;
+  text-align:center;
+  .mat-icon{
+    font-size:14px;
+    color:red;
+     width: 18px;
+    height: 18px;
+    line-height:18px;
+  }
+}
+
 .profile {
   white-space: normal;
   text-align: left;
@@ -84,7 +101,7 @@ $thumbnail-msize: 40px;
     width: $thumbnail-msize;
     height: $thumbnail-msize;
     margin-right: 16px;
-     border-radius:50%;
+    border-radius: 50%;
   }
   .info {
     position: relative;
@@ -117,9 +134,8 @@ $thumbnail-msize: 40px;
         }
         .num {
           font-size: 12px;
-          color: $color-main;
           flex: none;
-          margin-left: 10px;
+          margin-left: 6px;
         }
       }
       .room-msg {
@@ -155,9 +171,8 @@ $thumbnail-msize: 40px;
   padding: 0 6px;
   font-size: 11px;
   color: #ffffff;
-  background-color: $color-main;
   @include ellipsis(1);
-  border-radius:50%;
+  border-radius: 50%;
 }
 
 .notiBadge {
diff --git a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_list-item.scss b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_list-item.scss
index bc15342f..f341978d 100644
--- a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_list-item.scss
+++ b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_list-item.scss
@@ -17,4 +17,11 @@
 .mat-card-header .mat-card-title{
   margin:0 -16px;
   padding-bottom:10px;
+}
+.search-result{
+  .result-num{
+    padding:10px;
+    display:flex;
+    height:40px;
+  }
 }
\ No newline at end of file

From 057a5e87050f3c1d51b848557164ffbc15b46fda Mon Sep 17 00:00:00 2001
From: leejh <leejh@biztechpartners.co.kr>
Date: Fri, 1 Nov 2019 09:06:52 +0900
Subject: [PATCH 3/7] bugfix

---
 .../left-sidenav/chat.component.html          | 211 ++++++++----------
 1 file changed, 90 insertions(+), 121 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html
index ab79e495..d1843a20 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html
@@ -1,94 +1,66 @@
-<!--<div class="app-layout-chat-left-sidenav-chat-header list-search">
-  <form [formGroup]="fgSearch">
-    <mat-form-field class="w-100-p searchbox" floatLabel="never">
-      <input
-        matInput
-        #inputSearch
-        type="text"
-        maxlength="20"
-        placeholder="대화방 이름 검색"
-        value=""
-        formControlName="searchInput"
-        [matAutocomplete]="auto"
-        (keydown.enter)="onKeyDownEnter($event, inputSearch.value)"
-      />
-      <mat-autocomplete #auto="matAutocomplete">
-        <mat-option
-          *ngFor="let filteredRecommendedWord of filteredRecommendedWordList"
-          [value]="filteredRecommendedWord"
-        >
-          {{ filteredRecommendedWord }}
-        </mat-option>
-      </mat-autocomplete>
-
-      <button
-        mat-button
-        matSuffix
-        mat-icon-button
-        aria-label="Clear"
-        (click)="inputSearch.value = ''; onClickSearchCancel()"
-      >
-        <mat-icon>close</mat-icon>
-      </button>
-    </mat-form-field>
-  </form>-->
 <div>
   <div class="current-head">
     <h3>대화</h3>
     <div class="btn-box">
-      <button mat-icon-button>
+      <!-- <button mat-icon-button>
         <mat-icon>timer</mat-icon>
       </button>
       <button mat-icon-button>
         <mat-icon> add_comment</mat-icon>
-      </button>
+      </button> -->
     </div>
   </div>
-<div class="list-search">
-  <div class="searchbox">
-    <form [formGroup]="fgSearch" class="w-100-p">
-      <mat-form-field floatLabel="never">
-        <input
-          matInput
-          #inputSearch
-          type="text"
-          maxlength="20"
-          placeholder="대화방 이름 검색"
-          value=""
-          formControlName="searchInput"
-          [matAutocomplete]="auto"
-          (keydown.enter)="onKeyDownEnter($event, inputSearch.value)"
-        />
-        <button
-          mat-button
-          matSuffix
-          mat-icon-button
-          aria-label="Clear"
-          (click)="inputSearch.value = ''; onClickSearchCancel()"
-        >
-          <mat-icon>close</mat-icon>
-        </button>
-      </mat-form-field>
-    </form>
+  <div class="list-search">
+    <div class="searchbox">
+      <form [formGroup]="fgSearch" class="w-100-p">
+        <mat-form-field floatLabel="never">
+          <input
+            matInput
+            #inputSearch
+            type="text"
+            maxlength="20"
+            placeholder="대화방 이름 검색"
+            value=""
+            formControlName="searchInput"
+            [matAutocomplete]="auto"
+            (keydown.enter)="onKeyDownEnter($event, inputSearch.value)"
+          />
+          <mat-autocomplete #auto="matAutocomplete">
+            <mat-option
+              *ngFor="
+                let filteredRecommendedWord of filteredRecommendedWordList
+              "
+              [value]="filteredRecommendedWord"
+            >
+              {{ filteredRecommendedWord }}
+            </mat-option>
+          </mat-autocomplete>
+          <button
+            mat-button
+            matSuffix
+            mat-icon-button
+            aria-label="Clear"
+            (click)="inputSearch.value = ''; onClickSearchCancel()"
+          >
+            <mat-icon>close</mat-icon>
+          </button>
+        </mat-form-field>
+      </form>
+    </div>
   </div>
-</div>
 
-<div
-  *ngIf="!isSearch"
-  class="app-layout-chat-left-sidenav-chat-list"
- 
->
-  <ucap-room-list-item
-    *ngFor="let room of roomList"
-    [loginRes]="loginRes"
-    [roomInfo]="room"
-    [roomUserInfo]="getRoomUserList(room)"
-    [sessionVerinfo]="sessionVerinfo"
-    (click)="onSelectedRoom(room)"
-    (contextmenu)="onContextMenuChat($event, room)"
-  >
-  </ucap-room-list-item>
-  <!-- <cdk-virtual-scroll-viewport
+  <div *ngIf="!isSearch" class="app-layout-chat-left-sidenav-chat-list">
+    <ucap-room-list-item
+      *ngFor="let room of roomList"
+      [loginRes]="loginRes"
+      [roomInfo]="room"
+      [roomUserInfo]="getRoomUserList(room)"
+      [sessionVerinfo]="sessionVerinfo"
+      (click)="onSelectedRoom(room)"
+      (contextmenu)="onContextMenuChat($event, room)"
+    >
+    </ucap-room-list-item>
+    <!-- <cdk-virtual-scroll-viewport
     itemSize="20"
     class="app-layout-chat-left-sidenav-chat-list-viewport"
   >
@@ -103,23 +75,19 @@
     >
     </ucap-room-list-item>
   </cdk-virtual-scroll-viewport> -->
-</div>
-<div
-  *ngIf="!!isSearch"
-  class="app-layout-chat-left-sidenav-chat-list search"
-
->
-  <ucap-room-list-item
-    *ngFor="let room of searchRoomList"
-    [loginRes]="loginRes"
-    [roomInfo]="room"
-    [roomUserInfo]="getRoomUserList(room)"
-    [sessionVerinfo]="sessionVerinfo"
-    (click)="onSelectedRoom(room)"
-    (contextmenu)="onContextMenuChat($event, room)"
-  >
-  </ucap-room-list-item>
-  <!-- <cdk-virtual-scroll-viewport
+  </div>
+  <div *ngIf="!!isSearch" class="app-layout-chat-left-sidenav-chat-list search">
+    <ucap-room-list-item
+      *ngFor="let room of searchRoomList"
+      [loginRes]="loginRes"
+      [roomInfo]="room"
+      [roomUserInfo]="getRoomUserList(room)"
+      [sessionVerinfo]="sessionVerinfo"
+      (click)="onSelectedRoom(room)"
+      (contextmenu)="onContextMenuChat($event, room)"
+    >
+    </ucap-room-list-item>
+    <!-- <cdk-virtual-scroll-viewport
     itemSize="20"
     class="app-layout-chat-left-sidenav-chat-list-viewport"
   >
@@ -134,29 +102,30 @@
     >
     </ucap-room-list-item>
   </cdk-virtual-scroll-viewport> -->
-</div>
+  </div>
 
-<div
-  style="visibility: hidden; position: fixed"
-  [style.left]="chatContextMenuPosition.x"
-  [style.top]="chatContextMenuPosition.y"
-  #chatContextMenuTrigger="matMenuTrigger"
-  [matMenuTriggerFor]="chatContextMenu"
-></div>
-<mat-menu
-  #chatContextMenu="matMenu"
-  [hasBackdrop]="false"
-  (ucapUiClickOutside)="chatContextMenuTrigger.closeMenu()"
->
-  <ng-template matMenuContent let-roomInfo="roomInfo">
-    <button mat-menu-item (click)="onSelectedRoom(roomInfo)">
-      대화방 열기
-    </button>
-    <button mat-menu-item (click)="onClickToggleAlarm(roomInfo)">
-      대화방 알람 {{ roomInfo.receiveAlarm ? '끄기' : '켜기' }}
-    </button>
-    <button mat-menu-item (click)="onClickExit(roomInfo)">
-      대화방 나가기
-    </button>
-  </ng-template>
-</mat-menu>
+  <div
+    style="visibility: hidden; position: fixed"
+    [style.left]="chatContextMenuPosition.x"
+    [style.top]="chatContextMenuPosition.y"
+    #chatContextMenuTrigger="matMenuTrigger"
+    [matMenuTriggerFor]="chatContextMenu"
+  ></div>
+  <mat-menu
+    #chatContextMenu="matMenu"
+    [hasBackdrop]="false"
+    (ucapUiClickOutside)="chatContextMenuTrigger.closeMenu()"
+  >
+    <ng-template matMenuContent let-roomInfo="roomInfo">
+      <button mat-menu-item (click)="onSelectedRoom(roomInfo)">
+        대화방 열기
+      </button>
+      <button mat-menu-item (click)="onClickToggleAlarm(roomInfo)">
+        대화방 알람 {{ roomInfo.receiveAlarm ? '끄기' : '켜기' }}
+      </button>
+      <button mat-menu-item (click)="onClickExit(roomInfo)">
+        대화방 나가기
+      </button>
+    </ng-template>
+  </mat-menu>
+</div>

From 5c7ac7f199a5cd1c3abb957667ec0304c3cfaaea Mon Sep 17 00:00:00 2001
From: leejh <leejh@biztechpartners.co.kr>
Date: Fri, 1 Nov 2019 09:46:32 +0900
Subject: [PATCH 4/7] bugfix

---
 .../components/tenant-search.component.html   | 41 +++++--------------
 1 file changed, 11 insertions(+), 30 deletions(-)

diff --git a/projects/ucap-webmessenger-ui-organization/src/lib/components/tenant-search.component.html b/projects/ucap-webmessenger-ui-organization/src/lib/components/tenant-search.component.html
index 7c7f5586..675ab425 100644
--- a/projects/ucap-webmessenger-ui-organization/src/lib/components/tenant-search.component.html
+++ b/projects/ucap-webmessenger-ui-organization/src/lib/components/tenant-search.component.html
@@ -1,5 +1,6 @@
-<!--<div class="list-search">
+<div class="list-search">
   <div class="selectbox">
+    <!--<mat-label>회사선택</mat-label>-->
     <mat-select [(value)]="companyCode">
       <mat-option
         *ngFor="let company of companyList"
@@ -10,44 +11,24 @@
     </mat-select>
   </div>
   <div class="searchbox">
-    <input
-      matInput
-      #searchWordInput
-      placeholder="name"
-      (keydown.enter)="onKeyDownEnter(searchWordInput.value)"
-    />
-    <div class="btn-search">
+    <mat-form-field floatLabel="never" style="width:100%;">
+      <input
+        matInput
+        #searchWordInput
+        placeholder="name"
+        (keydown.enter)="onKeyDownEnter(searchWordInput.value)"
+      />
       <button
         mat-button
         matSuffix
         mat-icon-button
-        aria-label="cancel"
+        aria-label="Clear"
         (click)="searchWordInput.value = ''; onClickCancel()"
       >
         <mat-icon>close</mat-icon>
       </button>
-    </div>
+    </mat-form-field>
   </div>
-</div>-->
-<div class="list-search">
-  <div class="selectbox">
-  <!--<mat-label>회사선택</mat-label>-->
-  <mat-select [(value)]="companyCode">
-  <mat-option *ngFor="let company of companyList" [value]="company.companyCode">
-    {{ company.companyName }}
-  </mat-option>
-</mat-select>
-
-</div>
-<div class="searchbox">
-<mat-form-field floatLabel="never" style="width:100%;">
-  <input matInput #searchWordInput placeholder="name" (keydown.enter)="onKeyDownEnter(searchWordInput.value)" />
-  <button mat-button matSuffix mat-icon-button aria-label="Clear"
-    (click)="inputSearch.value = ''; onClickSearchCancel()">
-    <mat-icon>close</mat-icon>
-  </button>
-</mat-form-field>
-</div>
 </div>
 <!--검색창만 있는 경우--------------------------------------------------------------------------
 <div class="list-search">

From 9aff7114f82e7b8978acafa6c4305b0d6371cdf9 Mon Sep 17 00:00:00 2001
From: leejh <leejh@biztechpartners.co.kr>
Date: Fri, 1 Nov 2019 11:25:54 +0900
Subject: [PATCH 5/7] =?UTF-8?q?Notification=20=EC=82=AC=EC=A0=84=EC=9E=91?=
 =?UTF-8?q?=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 main/src/index.ts                             |  4 +
 .../src/app/services/notification.service.ts  | 25 +++++-
 .../src/app/store/messenger/sync/reducers.ts  | 90 +++++++------------
 .../src/lib/utils/string.util.ts              | 56 ++++++++++++
 .../ucap-webmessenger-core/src/public-api.ts  |  1 +
 .../lib/services/browser-native.service.ts    | 14 ++-
 .../lib/services/electron-native.service.ts   | 25 +++---
 .../src/lib/services/native.service.ts        | 17 ++--
 8 files changed, 143 insertions(+), 89 deletions(-)
 create mode 100644 projects/ucap-webmessenger-core/src/lib/utils/string.util.ts

diff --git a/main/src/index.ts b/main/src/index.ts
index a6023ee1..4cbd0ebe 100644
--- a/main/src/index.ts
+++ b/main/src/index.ts
@@ -194,3 +194,7 @@ ipcMain.on(Channel.saveFile, (event: IpcMainEvent, ...args: any[]) => {
     event.returnValue = false;
   }
 });
+
+ipcMain.on(Channel.showNotify, (event: IpcMainEvent, ...args: any[]) => {
+  console.log('Channel.showNotify', args);
+});
diff --git a/projects/ucap-webmessenger-app/src/app/services/notification.service.ts b/projects/ucap-webmessenger-app/src/app/services/notification.service.ts
index 20f000e7..bc2a1ecd 100644
--- a/projects/ucap-webmessenger-app/src/app/services/notification.service.ts
+++ b/projects/ucap-webmessenger-app/src/app/services/notification.service.ts
@@ -1,5 +1,5 @@
 import { delGroupSuccess, buddy2 } from './../store/messenger/sync/actions';
-import { Injectable } from '@angular/core';
+import { Injectable, Inject } from '@angular/core';
 
 import { tap, withLatestFrom } from 'rxjs/operators';
 
@@ -79,6 +79,12 @@ import * as EventStore from '@app/store/messenger/event';
 import * as SyncStore from '@app/store/messenger/sync';
 import * as RoomStore from '@app/store/messenger/room';
 import * as StatusStore from '@app/store/messenger/status';
+import {
+  NotiRequest,
+  NativeService,
+  UCAP_NATIVE_SERVICE
+} from '@ucap-webmessenger/native';
+import { StringUtil } from '@ucap-webmessenger/core';
 
 @Injectable()
 export class AppNotificationService {
@@ -90,6 +96,7 @@ export class AppNotificationService {
     private groupProtocolService: GroupProtocolService,
     private buddyProtocolService: BuddyProtocolService,
     private statusProtocolService: StatusProtocolService,
+    @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
     private store: Store<any>,
     private logger: NGXLogger
   ) {}
@@ -143,6 +150,22 @@ export class AppNotificationService {
                     noti
                   })
                 );
+
+                // notification..
+                if (notiOrRes.SSVC_TYPE === SSVC_TYPE_EVENT_SEND_NOTI) {
+                  const notiReq: NotiRequest = {
+                    roomSeq: noti.roomSeq,
+                    title: '메세지가 도착했습니다.',
+                    contents: StringUtil.convertFinalEventMessage(
+                      noti.eventType,
+                      noti.message
+                    ),
+                    image: '',
+                    useSound: true,
+                    interval: 0
+                  };
+                  this.nativeService.showNotify(notiReq);
+                }
               }
               break;
             case SSVC_TYPE_EVENT_READ_RES:
diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/sync/reducers.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/sync/reducers.ts
index 0b78043e..8420f361 100644
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/sync/reducers.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/sync/reducers.ts
@@ -1,4 +1,3 @@
-import { JsonObject } from 'type-fest';
 import { createReducer, on } from '@ngrx/store';
 import {
   initialState,
@@ -29,9 +28,7 @@ import {
 
 import * as RoomStore from '@app/store/messenger/room';
 import { RoomInfo } from '@ucap-webmessenger/protocol-room';
-import { EventType } from '@ucap-webmessenger/protocol-event';
-import { FileType } from '@ucap-webmessenger/protocol-file';
-import { JsonAnalization } from '@ucap-webmessenger/api';
+import { StringUtil } from '@ucap-webmessenger/core';
 
 export const reducer = createReducer(
   initialState,
@@ -103,63 +100,36 @@ export const reducer = createReducer(
   }),
 
   on(updateRoomForNewEventMessage, (state, action) => {
-    let finalEventMessage: string = action.info.sentMessage;
-    switch (action.info.type) {
-      case EventType.Join:
-      case EventType.Exit:
-      case EventType.RenameRoom:
-      case EventType.NotificationForTimerRoom:
-      case EventType.GuideForRoomTimerChanged: {
-        /**
-         * 해당 타입은 메시지를 갱신하지 않는다.
-         * @description Edit with ui-chat > messages.component.ts
-         */
-        return {
-          ...state
-        };
-      }
-      case EventType.Sticker:
-        finalEventMessage = '스티커';
-        break;
-      case EventType.File:
-        {
-          const contentJson = JSON.parse(finalEventMessage);
-          if (contentJson.FileType === FileType.Image) {
-            finalEventMessage = '이미지';
-          } else {
-            finalEventMessage = '첨부파일';
-          }
-        }
-        break;
-      case EventType.VideoConference:
-        finalEventMessage = '화상회의';
-        break;
-      case EventType.MassText:
-        {
-          try {
-            const json: JsonObject | Error = JsonAnalization.receiveAnalization(
-              finalEventMessage
-            );
-            finalEventMessage = json.Content.toString();
-          } catch (e) {
-            finalEventMessage = '대용량 텍스트';
-          }
-        }
-        break;
-    }
-    const roomInfo = {
-      ...state.room.entities[action.roomSeq],
-      finalEventDate: action.info.sendDate,
-      finalEventMessage
-    };
+    const finalEventMessage:
+      | string
+      | null = StringUtil.convertFinalEventMessage(
+      action.info.type,
+      action.info.sentMessage
+    );
 
-    return {
-      ...state,
-      room: adapterRoom.updateOne(
-        { id: action.roomSeq, changes: roomInfo },
-        { ...state.room }
-      )
-    };
+    if (!finalEventMessage) {
+      /**
+       * 해당 타입은 메시지를 갱신하지 않는다.
+       * @description Edit with ui-chat > messages.component.ts
+       */
+      return {
+        ...state
+      };
+    } else {
+      const roomInfo = {
+        ...state.room.entities[action.roomSeq],
+        finalEventDate: action.info.sendDate,
+        finalEventMessage
+      };
+
+      return {
+        ...state,
+        room: adapterRoom.updateOne(
+          { id: action.roomSeq, changes: roomInfo },
+          { ...state.room }
+        )
+      };
+    }
   }),
 
   on(RoomStore.updateSuccess, (state, action) => {
diff --git a/projects/ucap-webmessenger-core/src/lib/utils/string.util.ts b/projects/ucap-webmessenger-core/src/lib/utils/string.util.ts
new file mode 100644
index 00000000..997492d4
--- /dev/null
+++ b/projects/ucap-webmessenger-core/src/lib/utils/string.util.ts
@@ -0,0 +1,56 @@
+import { EventType } from '@ucap-webmessenger/protocol-event';
+import { FileType } from '@ucap-webmessenger/protocol-file';
+import { JsonObject } from 'type-fest';
+import { JsonAnalization } from '@ucap-webmessenger/api';
+
+export class StringUtil {
+  public static convertFinalEventMessage(
+    eventType: EventType,
+    finalEventMessage: string
+  ): string | null {
+    switch (eventType) {
+      case EventType.Join:
+      case EventType.Exit:
+      case EventType.RenameRoom:
+      case EventType.NotificationForTimerRoom:
+      case EventType.GuideForRoomTimerChanged: {
+        /**
+         * 해당 타입은 메시지를 갱신하지 않는다.
+         * @description Edit with ui-chat > messages.component.ts
+         */
+        return null;
+      }
+      case EventType.Sticker:
+        finalEventMessage = '스티커';
+        break;
+      case EventType.File:
+        {
+          const contentJson = JSON.parse(finalEventMessage);
+          if (contentJson.FileType === FileType.Image) {
+            finalEventMessage = '이미지';
+          } else {
+            finalEventMessage = '첨부파일';
+          }
+        }
+        break;
+      case EventType.VideoConference:
+        finalEventMessage = '화상회의';
+        break;
+      case EventType.MassText:
+        {
+          try {
+            const json: JsonObject | Error = JsonAnalization.receiveAnalization(
+              finalEventMessage
+            );
+            finalEventMessage = json.Content.toString();
+          } catch (e) {
+            finalEventMessage = '대용량 텍스트';
+          }
+        }
+        break;
+
+      default:
+        return finalEventMessage;
+    }
+  }
+}
diff --git a/projects/ucap-webmessenger-core/src/public-api.ts b/projects/ucap-webmessenger-core/src/public-api.ts
index 00883831..74c4c846 100644
--- a/projects/ucap-webmessenger-core/src/public-api.ts
+++ b/projects/ucap-webmessenger-core/src/public-api.ts
@@ -21,3 +21,4 @@ export * from './lib/types/status-type.type';
 export * from './lib/types/video-conference-type.type';
 
 export * from './lib/utils/mime.util';
+export * from './lib/utils/string.util';
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 5a5f6297..9c73c342 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
@@ -1,17 +1,15 @@
 import { Observable } from 'rxjs';
 
-import { NativeService, WindowState } from '@ucap-webmessenger/native';
+import {
+  NativeService,
+  WindowState,
+  NotiRequest
+} from '@ucap-webmessenger/native';
 import { HttpClient } from '@angular/common/http';
 import { map } from 'rxjs/operators';
 
 export class BrowserNativeService implements NativeService {
-  showNotify(
-    roomSeq: number,
-    title: string,
-    contents: string,
-    image: string,
-    useSound: boolean
-  ): void {}
+  showNotify(noti: NotiRequest): void {}
 
   checkForUpdates(): Observable<boolean> {
     return new Observable<boolean>(subscriber => {
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 d0002df4..28b1e5a8 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
@@ -2,7 +2,11 @@ import { ipcRenderer, remote, IpcRendererEvent } from 'electron';
 
 import { Observable, Subject } from 'rxjs';
 
-import { NativeService, WindowState } from '@ucap-webmessenger/native';
+import {
+  NativeService,
+  WindowState,
+  NotiRequest
+} from '@ucap-webmessenger/native';
 import { Channel } from '../types/channel.type';
 import { share } from 'rxjs/operators';
 
@@ -10,20 +14,15 @@ export class ElectronNativeService implements NativeService {
   private windowStateChangedSubject: Subject<WindowState> | null = null;
   private windowStateChanged$: Observable<WindowState> | null = null;
 
-  showNotify(
-    roomSeq: number,
-    title: string,
-    contents: string,
-    image: string,
-    useSound: boolean
-  ): void {
+  showNotify(noti: NotiRequest): void {
     ipcRenderer.send(
       Channel.showNotify,
-      roomSeq,
-      title,
-      contents,
-      image,
-      useSound
+      noti.roomSeq,
+      noti.title,
+      noti.contents,
+      noti.image,
+      noti.useSound,
+      noti.interval
     );
   }
 
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 ff0ef123..1944c2f8 100644
--- a/projects/ucap-webmessenger-native/src/lib/services/native.service.ts
+++ b/projects/ucap-webmessenger-native/src/lib/services/native.service.ts
@@ -3,13 +3,7 @@ import { Observable } from 'rxjs';
 import { WindowState } from '../types/window-state.type';
 
 export interface NativeService {
-  showNotify(
-    roomSeq: number,
-    title: string,
-    contents: string,
-    image: string,
-    useSound: boolean
-  ): void;
+  showNotify(noti: NotiRequest): void;
 
   checkForUpdates(): Observable<boolean>;
 
@@ -23,3 +17,12 @@ export interface NativeService {
   windowMinimize(): void;
   windowMaximize(): void;
 }
+
+export interface NotiRequest {
+  roomSeq: string;
+  title: string;
+  contents: string;
+  image: string;
+  useSound: boolean;
+  interval?: number;
+}

From 86ee7dd515dddf2f86d1a3d9db2522a6351b4c48 Mon Sep 17 00:00:00 2001
From: khk <kanghk@biztechpartners.co.kr>
Date: Fri, 1 Nov 2019 13:03:57 +0900
Subject: [PATCH 6/7] =?UTF-8?q?=EB=8C=80=ED=99=94=EB=B0=A9=20header?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/messages.component.html        |  27 +-
 .../components/messages.component.scss        | 337 ++++--------------
 .../src/assets/scss/global/_default.scss      |   7 +
 .../lib/components/messages.component.html    |   1 +
 .../lib/components/list-item.component.html   |   2 +-
 .../lib/components/list-item.component.scss   |   1 -
 6 files changed, 100 insertions(+), 275 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
index b2b1d766..87061a8e 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
@@ -8,20 +8,33 @@
         <button
           mat-icon-button
           aria-label="chats button"
-          fxHide.gt-md
           class="responsive-chats-button"
         >
           <mat-icon>chat</mat-icon>
         </button>
         <!-- / RESPONSIVE CHATS BUTTON-->
+        <button
+          mat-icon-button
+          aria-label="chats button"
+          class="responsive-chats-button"
+           *ngIf="!!roomInfo && roomInfo.isTimeRoom">
+          <mat-icon>timer</mat-icon>
+        </button>
       </div>
-      <div class="room-name">
-        {{ getRoomName() }}
+      <div class="room-info">
+        <h3 class="room-name">
+          {{ getRoomName() }}
+        </h3>
+        <!-- Timer Room Info -->
+        <div *ngIf="roomInfo && roomInfo.isTimeRoom" class="room-type text-accent-color ">
+          <span class="bg-accent-light">{{ getConvertTimer(roomInfo.timeRoomInterval) }} </span>비밀 대화방입니다.
+        </div>
+        <!-- Timer Room Info -->
       </div>
-      <div *ngIf="!!roomInfo && roomInfo.isTimeRoom">
+      <!--<div *ngIf="!!roomInfo && roomInfo.isTimeRoom">
         <mat-icon>timer</mat-icon>
         {{ getConvertTimer(roomInfo.timeRoomInterval) }}
-      </div>
+      </div>-->
       <div class="room-option">
         <button
           *ngIf="!!roomInfo"
@@ -69,9 +82,7 @@
     (fileDragOver)="onFileDragOver()"
     (fileDragLeave)="onFileDragLeave()"
   >
-    <!-- Timer Room Info -->
-    <span *ngIf="roomInfo && roomInfo.isTimeRoom">비밀 대화방입니다.</span>
-    <!-- Timer Room Info -->
+
 
     <!-- CHAT MESSAGES -->
     <perfect-scrollbar
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss
index 0e64a9f6..1e8fdf7c 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss
@@ -1,278 +1,85 @@
-/*.chat-messages {
-  position: relative;
-  padding: 16px 40px;
-
-  .message-row {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: flex-end;
-    padding: 0 16px 4px 16px;
-
-    .avatar {
-      position: absolute;
-      left: -32px;
-      margin: 0;
-    }
-
-    .bubble {
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 12px;
-      max-width: 100%;
-
-      .message {
-        white-space: pre-wrap;
-        line-height: 1.2;
-      }
-
-      .time {
-        position: absolute;
-        display: none;
-        width: 100%;
-        font-size: 11px;
-        margin-top: 8px;
-        top: 100%;
-        left: 0;
-        white-space: nowrap;
-      }
-    }
-
-    &.contact {
-      .bubble {
-        border-top-left-radius: 5px;
-        border-bottom-left-radius: 5px;
-
-        border-top-right-radius: 20px;
-        border-bottom-right-radius: 20px;
-
-        .time {
-          margin-left: 12px;
-        }
-      }
-
-      &.first-of-group {
-        .bubble {
-          border-top-left-radius: 20px;
-        }
-      }
-
-      &.last-of-group {
-        .bubble {
-          border-bottom-left-radius: 20px;
-        }
-      }
-    }
-
-    &.me {
-      padding-left: 40px;
-
-      .avatar {
-        order: 2;
-        margin: 0 0 0 16px;
-      }
-
-      .bubble {
-        margin-left: auto;
-
-        border-top-left-radius: 20px;
-        border-bottom-left-radius: 20px;
-
-        border-top-right-radius: 5px;
-        border-bottom-right-radius: 5px;
-
-        .time {
-          justify-content: flex-end;
-          right: 0;
-          margin-right: 12px;
-        }
-      }
-
-      &.first-of-group {
-        .bubble {
-          border-top-right-radius: 20px;
-        }
-      }
-
-      &.last-of-group {
-        .bubble {
-          border-bottom-right-radius: 20px;
-        }
-      }
-    }
-
-    &.contact + .me,
-    &.me + .contact {
-      padding-top: 20px;
-      margin-top: 20px;
-    }
-
-    &.first-of-group {
-      .bubble {
-        border-top-left-radius: 20px;
-        padding-top: 13px;
-      }
-    }
-
-    &.last-of-group {
-      .bubble {
-        border-bottom-left-radius: 20px;
-        padding-bottom: 13px;
-
-        .time {
-          display: flex;
-        }
-      }
-    }
-  }
-}
-*/
-$otherBox-line: #cccccc;
-$otherBox-bg: #ffffff;
-$meBox-line: #cccccc;
-$meBox-bg: #ffffff;
-
-.chat-messages {
-  padding: 30px 40px;
+@charset 'utf-s';
+:host {
   display: flex;
-  flex-direction: column;
-}
-.information-msg {
   width: 100%;
   height: 100%;
-  text-align: center;
-  background-color: #dddddd;
-  padding: 10px;
-  margin: 10px 0;
 }
-
-.message-row {
-  margin-bottom: 20px;
-  .date-splitter {
+@mixin ellipsis($row) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  @if $row == 1 {
     display: block;
-    width: 100%;
-    margin-bottom: 10px;
-  }
-  .chat-row {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    .profile-img {
-      flex: 0 0 auto;
-      img{
-        border-radius: 50%;
-      }
-    }
-  }
-  &.me {
-    .chat-row {
-      flex-direction: row-reverse;
-      .profile-info {
-        flex-direction: row-reverse;
-        display: flex;
-        justify-content: flex-end;
-      }
-    }
-  }
-
-  .message-main {
-    margin-left: 20px;
-    margin-right: 10px;
-    .chat-name {
-      font-size: 12px;
-      color: #333333;
-      margin-bottom: 6px;
-    }
-    .bubble {
-      border: 1px solid $otherBox-line;
-      font-weight: 900;
-      position: relative;
-      background-color: $otherBox-bg;
-      border-radius: 4px;
-      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
-      &:before {
-        content: '';
-        width: 0px;
-        height: 0px;
-        position: absolute;
-        border-left: 6px solid transparent;
-        border-right: 6px solid $otherBox-line;
-        border-top: 6px solid $otherBox-line;
-        border-bottom: 6px solid transparent;
-        left: -12px;
-        top: 4px;
-      }
-      &:after {
-        content: '';
-        width: 0px;
-        height: 0px;
-        position: absolute;
-        border-left: 6px solid transparent;
-        border-right: 6px solid $otherBox-bg;
-        border-top: 6px solid $otherBox-bg;
-        border-bottom: 6px solid transparent;
-        left: -10px;
-        top: 5px;
-      }
-    }
-  }
-  .secondary-text {
-    align-self: flex-end;
-    font-size: 11px;
-    color: #666666;
-    word-wrap: break-word;
     white-space: nowrap;
-  }
-  &.me {
-    .secondary-text {
-      text-align: end;
-    }
+    word-wrap: normal;
+  } @else if $row >= 2 {
+    display: -webkit-box;
+    -webkit-line-clamp: $row;
+    -webkit-box-orient: vertical;
+    word-wrap: break-word;
   }
 }
+.container{
+  position: relative;
+  width:100%;
+}
+.chat-toolbar {
+  width:100%;
+  height: 70px;
+  min-height: 70px;
+  align-items: center;
+  background-color: #ffffff !important;
+  border: 1px solid #dddddd;
 
-.message-row.me > .bubble {
-  border: 1px solid $meBox-line;
-  background-color: $meBox-bg;
-}
-.message-row.me {
-  .profile-img {
-    display: none;
-  }
-  .chat-name {
-    display: none;
-  }
-  .message-main {
-    text-align: right;
-    margin-left: 10px;
-    margin-right: 20px;
-    & .bubble:before {
-      content: '';
-      width: 0px;
-      height: 0px;
-      position: absolute;
-      border-left: 6px solid $meBox-line;
-      border-right: 6px solid transparent;
-      border-top: 6px solid $meBox-line;
-      border-bottom: 6px solid transparent;
-      left: initial;
-      right: -12px;
-      top: 4px;
+  .chat-header {
+    width: 100%;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    .profile-img {
+      margin-right: 20px;
+      .responsive-chats-button {
+        display: none;
+        &:last-child {
+          display: block;
+          padding: 0;
+          width: 40px;
+          height: 40px;
+          border-radius: 50%;
+          background-color: #252525;
+          color: #efefef;
+          font-size: 16px;
+          line-height: 40px;
+        }
+      }
     }
-    & .bubble:after {
-      content: '';
-      width: 0px;
-      height: 0px;
-      position: absolute;
-      border-left: 6px solid $meBox-bg;
-      border-right: 6px solid transparent;
-      border-top: 6px solid $meBox-bg;
-      border-bottom: 6px solid transparent;
-      left: initial;
-      right: -10px;
-      top: 5px;
+    .room-info {
+      display:flex;
+      flex-flow: column;
+      overflow: hidden;
+      .room-name {
+        font-size: 16px;
+        line-height: normal;
+        @include ellipsis(1);
+      }
+      .room-type {
+        font-size: 14px;
+        line-height: normal;
+        margin-top: 6px;
+        height:20px;
+        span{
+          border-radius:10px;
+          padding:1px 10px;
+          margin-right:6px;
+          font-size:13px;
+        }
+      }
+    }
+    .room-option {
+      wdith: 100%;
+      margin-left: auto;
     }
   }
 }
+.chat-content {
+  overflow: auto;
+}
diff --git a/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss b/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
index 9103d893..612060a2 100644
--- a/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
+++ b/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
@@ -97,6 +97,10 @@ $lg-red: (
     background: mat-color($accent, 600);
     color: mat-color($primary, default-contrast);
   }
+  .bg-accent-light {
+    background: mat-color($accent, 300);
+    color: mat-color($primary, default-contrast);
+  }
   .bg-accent-color {
     background: mat-color($accent);
     color: mat-color($accent, default-contrast);
@@ -107,6 +111,9 @@ $lg-red: (
   .text-accent-color {
     color: mat-color($accent);
   }
+  .text-warn-color{
+    color:mat-color($warn);
+  }
   .border-primary-color {
     border: 1px solid mat-color($primary);
   }
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html
index e0a507d8..71104e9f 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html
@@ -37,6 +37,7 @@
           <ucap-chat-message-box-information
             *ngSwitchCase="EventType.Exit"
             [message]="message"
+            class="information-msg"
           >
           </ucap-chat-message-box-information>
           <ucap-chat-message-box-information
diff --git a/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html b/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html
index 91e282d6..65f730fd 100644
--- a/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html
+++ b/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html
@@ -9,7 +9,7 @@
         [path]="imagePath"
         [default]="defaultPath"
       />
-      <span *ngIf="roomInfo.isTimeRoom" class="badge-timer">
+      <span *ngIf="roomInfo.isTimeRoom" class="text-warn-color badge-timer">
           <mat-icon>timer</mat-icon>
       </span>
       <!-- <ucap-ui-imaage
diff --git a/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss b/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss
index 0bbc8f8e..b5446a51 100644
--- a/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss
+++ b/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss
@@ -35,7 +35,6 @@ $thumbnail-msize: 40px;
   text-align:center;
   .mat-icon{
     font-size:14px;
-    color:red;
      width: 18px;
     height: 18px;
     line-height:18px;

From bf9bcd967b4f5c34c50933fc8adaf735bb91c3e5 Mon Sep 17 00:00:00 2001
From: leejh <leejh@biztechpartners.co.kr>
Date: Fri, 1 Nov 2019 13:43:49 +0900
Subject: [PATCH 7/7] =?UTF-8?q?Timer=20=EB=8C=80=ED=99=94=EB=B0=A9?=
 =?UTF-8?q?=EC=9D=98=20=EB=8C=80=ED=99=94=20=EC=9E=90=EB=8F=99=20=EC=82=AD?=
 =?UTF-8?q?=EC=A0=9C=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/messages.component.ts          | 11 +++++
 .../src/app/store/messenger/event/actions.ts  |  7 ++-
 .../src/app/store/messenger/event/effects.ts  | 44 ++++++++++++++++++-
 .../src/app/store/messenger/event/reducers.ts |  6 +--
 4 files changed, 62 insertions(+), 6 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts
index 402f0f50..5a7f1b87 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts
@@ -102,6 +102,9 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked {
   files: File[];
   fileItems: DataTransferItemList;
 
+  /** Timer 대화방의 대화 삭제를 위한 interval */
+  interval: any;
+
   constructor(
     private store: Store<any>,
     private sessionStorageService: SessionStorageService,
@@ -173,6 +176,12 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked {
     );
 
     this.psChatContent.directiveRef.scrollToBottom(0, 0);
+
+    this.interval = setInterval(() => {
+      if (!!this.roomInfo.isTimeRoom) {
+        this.store.dispatch(EventStore.infoIntervalClear({}));
+      }
+    }, 1000);
   }
 
   ngOnDestroy(): void {
@@ -185,6 +194,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked {
     if (!!this.userInfoListSubscription) {
       this.userInfoListSubscription.unsubscribe();
     }
+
+    clearInterval(this.interval);
   }
 
   ngAfterViewChecked(): void {
diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/event/actions.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/event/actions.ts
index a06301c8..4ffe65af 100644
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/event/actions.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/event/actions.ts
@@ -37,6 +37,11 @@ export const infoMoreSuccess = createAction(
   }>()
 );
 
+export const infoIntervalClear = createAction(
+  '[Messenger::Event] Info Interval Clear',
+  props()
+);
+
 export const infoFailure = createAction(
   '[Messenger::Event] Info Failure',
   props<{ error: any }>()
@@ -182,6 +187,6 @@ export const delNotification = createAction(
 export const delInfoList = createAction(
   '[Messenger::Event] Delete InfoList',
   props<{
-    eventSeq: number;
+    eventSeqs: number[];
   }>()
 );
diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/event/effects.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/event/effects.ts
index e82da5aa..db1efa13 100644
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/event/effects.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/event/effects.ts
@@ -68,7 +68,8 @@ import {
   forwardAfterRoomOpen,
   sendMass,
   sendMassFailure,
-  infoMoreSuccess
+  infoMoreSuccess,
+  infoIntervalClear
 } from './actions';
 import { SessionStorageService } from '@ucap-webmessenger/web-storage';
 import {
@@ -158,6 +159,45 @@ export class Effects {
     { dispatch: false }
   );
 
+  infoIntervalClear$ = createEffect(
+    () => {
+      return this.actions$.pipe(
+        ofType(infoIntervalClear),
+        withLatestFrom(
+          this.store.pipe(
+            select((state: any) => state.messenger.room.roomInfo as RoomInfo)
+          ),
+          this.store.pipe(
+            select(
+              (state: any) =>
+                state.messenger.event.infoList.entities as Dictionary<Info>
+            )
+          )
+        ),
+        map(([action, roomInfo, eventList]) => {
+          if (roomInfo.isTimeRoom && roomInfo.timeRoomInterval > 0) {
+            const delEventSeq: number[] = [];
+            // tslint:disable-next-line: forin
+            for (const key in eventList) {
+              const event: Info = eventList[key];
+              if (
+                new Date().getTime() - new Date(event.sendDate).getTime() >=
+                roomInfo.timeRoomInterval * 1000
+              ) {
+                delEventSeq.push(event.seq);
+              }
+            }
+
+            if (delEventSeq.length > 0) {
+              this.store.dispatch(delInfoList({ eventSeqs: delEventSeq }));
+            }
+          }
+        })
+      );
+    },
+    { dispatch: false }
+  );
+
   read$ = createEffect(() =>
     this.actions$.pipe(
       ofType(read),
@@ -533,7 +573,7 @@ export class Effects {
         tap(([noti, roomInfo]) => {
           // 현재 방이 오픈되어 있으면 방내용 갱신
           if (!!roomInfo && roomInfo.roomSeq === noti.roomSeq) {
-            this.store.dispatch(delInfoList({ eventSeq: noti.eventSeq }));
+            this.store.dispatch(delInfoList({ eventSeqs: [noti.eventSeq] }));
           }
 
           // 대화 > 리스트의 항목 갱신
diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/event/reducers.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/event/reducers.ts
index ee6c3be2..a357c4b4 100644
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/event/reducers.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/event/reducers.ts
@@ -97,11 +97,11 @@ export const reducer = createReducer(
   }),
 
   on(delInfoList, (state, action) => {
-    const eventSeq = action.eventSeq;
-
     return {
       ...state,
-      infoList: adapterInfoList.removeOne(eventSeq, { ...state.infoList })
+      infoList: adapterInfoList.removeMany(action.eventSeqs, {
+        ...state.infoList
+      })
     };
   }),