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

electron-builder.json

@@ -1,10 +1,10 @@
 {
-  "productName": "UCapMessenger",
+  "productName": "DS Talk",
   "appId": "com.lgucap.messenger",
   "asar": true,
   "protocols": {
-    "name": "UCapMessenger",
+    "name": "DS Talk",
-    "schemes": ["UCapMessenger"]
+    "schemes": ["DS Talk"]
   },
   "publish": {
     "provider": "generic",
@@ -15,7 +15,7 @@
     "icon": "./dist/ucap-webmessenger-electron/resources/installer/woori.icns"
   },
   "dmg": {
-    "title": "UCapMessenger",
+    "title": "DS Talk",
     "icon": "./dist/ucap-webmessenger-electron/resources/installer/woori.icns"
   },
   "win": {

electron-projects/ucap-webmessenger-electron/src/index.ts

@@ -211,7 +211,7 @@ function createTray() {
       }
     }
   ]);
-  appTray.setToolTip('UCapMessenger');
+  appTray.setToolTip('DS Talk');
   appTray.setContextMenu(contextMenu);
 
   appTray.on('click', () => {

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/intro.component.html

@@ -12,7 +12,7 @@
     class="app-title mt-48 mb-8"
     [@animate]="{ value: '*', params: { delay: '100ms', y: '25px' } }"
   >
-    M Messenger
+    {{ getTitle() }}
   </span>
 
   <span

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/intro.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { ucapAnimations } from '@ucap-webmessenger/ui';
+import { environment } from '../../../../environments/environment';
 
 @Component({
   selector: 'app-layout-messenger-intro',
@@ -11,4 +12,10 @@ export class IntroComponent implements OnInit {
   constructor() {}
 
   ngOnInit() {}
+
+  getTitle() {
+    return !!environment && !!environment.title
+      ? environment.title
+      : 'UCapMessenger';
+  }
 }

projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html

@@ -2,7 +2,7 @@
   <div class="app-layout-native-title-bar-logo">
     <img src="assets/images/logo/64_64.png" />
   </div>
-  <div class="app-layout-native-title-bar-title">UCAP M Messenger!!</div>
+  <div class="app-layout-native-title-bar-title">DS Talk</div>
   <div class="app-layout-native-title-bar-spacer"></div>
   <div *ngIf="!!loginRes" class="app-layout-native-title-bar-link">
     <button
@@ -12,21 +12,15 @@
       matTooltip="웹링크"
       (click)="onToggleWebLinkSelector()"
     >
-      <svg
+      <svg class="svg-icon" viewBox="0 0 24 24" fill="currentColor">
-        xmlns="http://www.w3.org/2000/svg"
-        width="18"
-        height="18"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="1.5"
-        stroke-linecap="butt"
-        stroke-linejoin="round"
-        alt="웹링크"
-        class="stroke-warn-color"
-      >
         <path
-          d="M10 3H6a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h4M16 17l5-5-5-5M19.8 12H9"
+          d="M13.29 9.29l-4 4a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l4-4a1 1 0 0 0-1.42-1.42z"
+        />
+        <path
+          d="M12.28 17.4L11 18.67a4.2 4.2 0 0 1-5.58.4 4 4 0 0 1-.27-5.93l1.42-1.43a1 1 0 0 0 0-1.42 1 1 0 0 0-1.42 0l-1.27 1.28a6.15 6.15 0 0 0-.67 8.07 6.06 6.06 0 0 0 9.07.6l1.42-1.42a1 1 0 0 0-1.42-1.42z"
+        />
+        <path
+          d="M19.66 3.22a6.18 6.18 0 0 0-8.13.68L10.45 5a1.09 1.09 0 0 0-.17 1.61 1 1 0 0 0 1.42 0L13 5.3a4.17 4.17 0 0 1 5.57-.4 4 4 0 0 1 .27 5.95l-1.42 1.43a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l1.42-1.42a6.06 6.06 0 0 0-.6-9.06z"
         />
       </svg>
     </button>
@@ -65,22 +59,14 @@
       matTooltip="공지사항"
       (click)="onClickNotice()"
     >
-      <svg
+      <svg class="svg-icon" viewBox="0 0 24 24" fill="currentColor">
-        xmlns="http://www.w3.org/2000/svg"
+      <path d="M22.13,8.91h-1.94V1.56c0-0.31-0.18-0.58-0.47-0.7c-0.28-0.12-0.61-0.05-0.82,0.16c-3.35,3.35-6.25,4.95-8.09,5.7
-        width="18"
+      	C8.82,7.54,7.61,7.56,7.6,7.56H1.87c-0.42,0-0.76,0.34-0.76,0.76v6.76c0,0.42,0.34,0.76,0.76,0.76h0.77l2.86,6.9
-        height="18"
+      	c0.12,0.28,0.39,0.47,0.7,0.47h4.19c0,0,0,0,0,0c0.42,0,0.76-0.34,0.76-0.76c0-0.12-0.03-0.23-0.08-0.33l-2.55-6.16
-        viewBox="0 0 24 24"
+      	c1.69,0.33,5.57,1.6,10.38,6.42c0.14,0.14,0.34,0.22,0.53,0.22c0,0,0.01,0,0.01,0c0.41-0.01,0.74-0.34,0.74-0.76
-        fill="none"
+      	c0-0.02,0-0.03,0-0.05l0-7.31h1.94c0.42,0,0.76-0.34,0.76-0.76V9.67C22.88,9.25,22.54,8.91,22.13,8.91z M2.63,9.07h4.22v5.25H2.63
-        stroke="currentColor"
+      	V9.07z M6.7,21.68l-2.35-5.67h2.55l2.35,5.67H6.7z M8.36,14.39V9c1.57-0.24,5.45-1.26,10.31-5.68v6.34v0v4.05c0,0,0,0,0,0l0,6.34
-        stroke-width="1.5"
+      	C13.81,15.65,9.93,14.63,8.36,14.39z M21.37,12.97h-1.19v-2.54h1.19V12.97z" />
-        stroke-linecap="butt"
-        stroke-linejoin="round"
-        alt="공지사항"
-      >
-        <circle cx="12" cy="12" r="3"></circle>
-        <path
-          d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
-        ></path>
       </svg>
     </button>
 

projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss

@@ -21,7 +21,7 @@
 
     .app-layout-native-title-bar-title {
       padding-left: 8px;
-      font-size: 12px;
+      font-size: 13px;
     }
 
     .app-layout-native-title-bar-spacer {

projects/ucap-webmessenger-app/src/app/store/messenger/event/effects.ts

@@ -328,16 +328,20 @@ export class Effects {
                         infoList.length === action.req.requestCount &&
                         processing
                       ) {
-                        this.store.dispatch(
+                        // // 재귀
-                          infoForSearch({
+                        // this.store.dispatch(
-                            req: {
+                        //   infoForSearch({
-                              roomSeq: req.roomSeq,
+                        //     req: {
-                              baseSeq: infoList[0].seq,
+                        //       roomSeq: req.roomSeq,
-                              requestCount: req.requestCount
+                        //       baseSeq: infoList[0].seq,
-                            },
+                        //       requestCount: req.requestCount
-                            searchText: action.searchText
+                        //     },
-                          })
+                        //     searchText: action.searchText
-                        );
+                        //   })
+                        // );
+
+                        // 재귀하지 않는다.
+                        this.store.dispatch(infoForSearchEnd({}));
                       } else {
                         if (infoList.length < action.req.requestCount) {
                           this.store.dispatch(infoForSearchEnd({}));

projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss

@@ -103,7 +103,7 @@ $aquaBlue-daesang: (
   A100: #84ffff,
   A200: #18ffff,
   A400: #00e5ff,
-  A700: #00b8d4,
+  A700: #06a6c1,
   B100: #2d3a4a,
   //,#47667fbackgroundcolor
     G100: #0367a6,

projects/ucap-webmessenger-app/src/environments/environment.prod.ts

@@ -13,7 +13,7 @@ import { DeviceType } from '@ucap-webmessenger/core';
 
 export const environment: Environment = {
   production: true,
-  title: `[개발] UCapMessenger`,
+  title: `UCapMessenger`,
 
   companyConfig: {
     companyGroupCode: 'LG',

projects/ucap-webmessenger-app/src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>UcapWebmessengerApp</title>
+    <title>DS Talk</title>
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />

projects/ucap-webmessenger-protocol-event/src/lib/protocols/event-json/plan.event-json.ts

@@ -4,11 +4,16 @@ import { JsonAnalization } from '@ucap-webmessenger/api';
 export interface PlanEventJson {
   planSeq?: number;
   title?: string;
-  contents?: string;
+  contents?: PlanContentType;
   date?: string;
   endDate?: string;
   active?: boolean;
 }
+export enum PlanContentType {
+  New = 'PLAN_CONTENTS_NEW',
+  Update = 'PLAN_CONTENTS_UPDATE',
+  Delete = 'PLAN_CONTENTS_DELETE'
+}
 
 export const decodePlanEventJson: EventJsonDecoder<PlanEventJson> = (
   message: string
@@ -18,10 +23,9 @@ export const decodePlanEventJson: EventJsonDecoder<PlanEventJson> = (
     return {
       planSeq: json.planSeq,
       title: json.title,
-      contents: json.contents,
+      contents: json.contents as PlanContentType,
       date: json.date,
       endDate: json.endDate,
-      chat: json.chat,
       active: !!json.activeYn && 'Y' === json.activeYn ? true : false
     } as PlanEventJson;
   } catch (e) {

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/schedule.component.html

@@ -1,16 +1,37 @@
 <div class="event-main">
-  <div class="event-header">이벤트제목</div>
+  <div class="event-header">
+    <ng-container
+      *ngIf="!!message.sentMessageJson && !!message.sentMessageJson.contents"
+    >
+      <ng-container [ngSwitch]="message.sentMessageJson.contents">
+        <ng-container *ngSwitchCase="PlanContentType.New">
+          [이벤트] 등록
+        </ng-container>
+        <ng-container *ngSwitchCase="PlanContentType.Update">
+          [이벤트] 수정
+        </ng-container>
+        <ng-container *ngSwitchCase="PlanContentType.Delete">
+          [이벤트] 삭제
+        </ng-container>
+        <ng-container *ngSwitchDefault>
+          [이벤트] 조회중..
+        </ng-container>
+      </ng-container>
+    </ng-container>
+  </div>
   <ul class="event-info">
     <li class="event-title">
-      이벤트 타일틀이벤트 타일틀이벤트 타일틀이벤트 타일틀이벤트 타일틀이벤트
+      {{ message.sentMessageJson.title }}
-      타일틀이벤트 타일틀이벤트 타일틀이벤트 타일틀이벤트 타일틀이벤트
+    </li>
-      타일틀이벤트 타일틀
+    <li class="event-date">
+      <span>날짜</span>{{ date | ucapDate: 'YYYY.MM.DD' }}
+    </li>
+    <li class="event-time">
+      <span>시간</span>{{ date | ucapDate: 'a hh:mm' }}
     </li>
-    <li class="event-date"><span>날짜</span> 2019.09.30</li>
-    <li class="event-time"><span>시간</span>오후 10시</li>
   </ul>
 
-  <div class="btn-box">
+  <!-- <div class="btn-box">
     <button mat-button (click)="onClickSave()">상세보기</button>
-  </div>
+  </div> -->
 </div>

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/schedule.component.ts

@@ -1,4 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
+import {
+  Info,
+  PlanEventJson,
+  PlanContentType
+} from '@ucap-webmessenger/protocol-event';
+import moment from 'moment';
 
 @Component({
   selector: 'ucap-chat-message-box-schedule',
@@ -6,9 +12,60 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./schedule.component.scss']
 })
 export class ScheduleComponent implements OnInit {
+  @Input()
+  message: Info<PlanEventJson>;
+
+  PlanContentType = PlanContentType;
+  date: any;
+  endDate: any;
+
   constructor() {}
 
-  ngOnInit() {}
+  ngOnInit() {
+    if (!!this.message && !!this.message.sentMessageJson) {
+      if (!!this.message.sentMessageJson.date) {
+        let str_date = this.message.sentMessageJson.date
+          .replace(/ /g, '')
+          // .replace(/\n/g, '')
+          .replace(/(\([월,화,수,목,금,토,일]\))/g, '');
+        if (str_date.indexOf('오전') > -1) {
+          str_date = str_date.replace('오전', ' ');
+        } else if (str_date.indexOf('오후') > -1) {
+          str_date = str_date.replace('오후', ' ');
+          const arr = str_date.split(' ');
+          let h = Number(arr[1].split(':')[0]) + 12;
+          str_date = arr[0] + ' ' + h + ':' + arr[1].split(':')[1];
+        }
+
+        this.date = moment(str_date).toDate();
+        if (this.date === 'Invalid Date') {
+          this.date = this.message.sentMessageJson.date.replace(/\n/g, '');
+        }
+      }
+      // if (!!this.message.sentMessageJson.endDate) {
+      //   let str_endDate = this.message.sentMessageJson.endDate
+      //     .replace(/ /g, '')
+      //     .replace(/\n/g, '')
+      //     .replace(/(\([월,화,수,목,금,토,일]\))/g, '');
+      //   if (str_endDate.indexOf('오전') > -1) {
+      //     str_endDate = str_endDate.replace('오전', ' ');
+      //   } else if (str_endDate.indexOf('오후') > -1) {
+      //     str_endDate = str_endDate.replace('오후', ' ');
+      //     const arr = str_endDate.split(' ');
+      //     let h = Number(arr[1].split(':')[0]) + 12;
+      //     str_endDate = arr[0] + ' ' + h + ':' + arr[1].split(':')[1];
+      //   }
+
+      //   this.endDate = moment(str_endDate).toDate();
+      //   if (this.endDate === 'Invalid Date') {
+      //     this.endDate = this.message.sentMessageJson.endDate.replace(
+      //       /\n/g,
+      //       ''
+      //     );
+      //   }
+      // }
+    }
+  }
 
   onClickSave(): void {}
 }

projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html

@@ -161,12 +161,17 @@
                 (contextmenu)="onContextMenuMessage($event, message)"
               >
               </ucap-chat-message-box-text>
+              <ucap-chat-message-box-schedule
+                *ngSwitchCase="EventType.Plan"
+                [message]="message"
+                (contextmenu)="onContextMenuMessage($event, message)"
+              >
+              </ucap-chat-message-box-schedule>
               <div *ngSwitchDefault>
                 <!-- mass-translation
                 <ucap-chat-message-box-mass-translation></ucap-chat-message-box-mass-translation>
                 notice
                 <ucap-chat-message-box-notice></ucap-chat-message-box-notice>
-                <ucap-chat-message-box-schedule></ucap-chat-message-box-schedule>
                 translation
                 <ucap-chat-message-box-translation></ucap-chat-message-box-translation>
                 video-conference
@@ -185,7 +190,7 @@
           <ul>
             <li *ngIf="isShowUnreadCount">{{ getUnreadCount(message) }}</li>
             <li>
-              {{ moment(message.sendDate).toDate() | date: 'a hh:mm' }}
+              {{ message.sendDate | ucapDate: 'a hh:mm' }}
             </li>
           </ul>
         </div>

projects/ucap-webmessenger-ui-profile/src/lib/components/profile.component.html

@@ -1,92 +1,57 @@
 <mat-card class="example-card mat-elevation-z">
   <mat-card-header>
-    <mat-card-title>
-      <span>{{ userInfo | ucapTranslate: 'name' }}</span>
-      <span>{{ userInfo | ucapTranslate: 'grade' }}</span>
-    </mat-card-title>
-    <mat-card-subtitle>{{
-      userInfo | ucapTranslate: 'deptName'
-    }}</mat-card-subtitle>
-  </mat-card-header>
-
-  <mat-card-content>
     <div class="profile-img">
-      <img
+      <div class="profile-img-mask">
-        ucapImage
+        <img ucapImage [base]="profileImageRoot" [path]="userInfo.profileImageFile"
-        [base]="profileImageRoot"
+        [default]="'assets/images/img_nophoto_50.png'" />
-        [path]="userInfo.profileImageFile"
+      </div>
-        [default]="'assets/images/img_nophoto_50.png'"
-      />
 
-      <mat-spinner
+      <button mat-mini-fab class="mat-elevation-z6 btn-upload-profile-image" *ngIf="isMe && editableProfileImage"
-        *ngIf="
+        matTooltip="프로필 이미지 변경" matTooltipPosition="above" [disabled]="
-          profileImageFileUploadItem &&
+                        profileImageFileUploadItem &&
-          profileImageFileUploadItem.uploadingProgress$
+                        profileImageFileUploadItem.uploadingProgress$
-        "
+                      " (click)="profileImageFileInput.click()">
-        mode="determinate"
-        strokeWidth="5"
-        diameter="84"
-        [value]="profileImageFileUploadItem.uploadingProgress$ | async"
-        class="upload-profile-image-spinner"
-      ></mat-spinner>
-
-      <button
-        mat-mini-fab
-        class="mat-elevation-z6 upload-profile-image-btn"
-        *ngIf="isMe && editableProfileImage"
-        matTooltip="프로필 이미지 변경"
-        matTooltipPosition="above"
-        [disabled]="
-          profileImageFileUploadItem &&
-          profileImageFileUploadItem.uploadingProgress$
-        "
-        (click)="profileImageFileInput.click()"
-      >
         <span class="mdi mdi-upload mdi-18px"></span>
       </button>
-      <input
+
-        type="file"
+      <span class="work-status text-accent-darkest">
-        #profileImageFileInput
+        {{ getWorkstatus(userInfo) }} 휴가중
-        style="display: none"
+      </span>
-        (change)="onChangeFileInput()"
+
-      />
+      <mat-spinner *ngIf="
+                  profileImageFileUploadItem &&
+                  profileImageFileUploadItem.uploadingProgress$
+                " mode="determinate" strokeWidth="5" diameter="84"
+        [value]="profileImageFileUploadItem.uploadingProgress$ | async" class="upload-profile-image-spinner"></mat-spinner>
+
+      <input type="file" #profileImageFileInput style="display: none" (change)="onChangeFileInput()" />
+
     </div>
 
+    <mat-card-title>
+      <span class="name">{{ userInfo | ucapTranslate: 'name' }}</span>
+      <span class="number">(A123456)</span>
+    </mat-card-title>
+    <mat-card-subtitle>
+      <span class="deptName">{{userInfo | ucapTranslate: 'deptName'}}</span>
+      <span class="grade">{{ userInfo | ucapTranslate: 'grade' }}</span>
+    </mat-card-subtitle>
+
+    <div class="intro">{{ userInfo.intro }}가나다라라라마마마바사아자차카타파하가나다라마사아자차카타파하가나다라마사아자차카타파하가나다라마사아자차카타파하가나다라마사아자차카타파하</div>
+
     <div *ngIf="!isMe" class="profile-option">
       <span *ngIf="isBuddy" class="btn-favorite" (click)="onToggleFavorit()">
-        <svg
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-          xmlns="http://www.w3.org/2000/svg"
+          stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round" [ngClass]="[isFavorit ? 'on' : '']">
-          width="20"
+          <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
-          height="20"
+          </polygon>
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="1.5"
-          stroke-linecap="butt"
-          stroke-linejoin="round"
-          [ngClass]="[isFavorit ? 'on' : '']"
-        >
-          <polygon
-            points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
-          ></polygon>
         </svg>
       </span>
       <span class="btn-groupadd">
         <ng-container [ngSwitch]="isBuddy">
-          <svg
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
-            xmlns="http://www.w3.org/2000/svg"
+            stroke="currentColor" stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round" class="on"
-            width="20"
+            *ngSwitchCase="false" (click)="onClickAddBuddy()">
-            height="20"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.5"
-            stroke-linecap="butt"
-            stroke-linejoin="round"
-            class="on"
-            *ngSwitchCase="false"
-            (click)="onClickAddBuddy()"
-          >
             <!-- not buddy -->
             <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
             <circle cx="8.5" cy="7" r="4"></circle>
@@ -94,20 +59,9 @@
             <line x1="23" y1="11" x2="17" y2="11"></line>
           </svg>
 
-          <svg
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
-            xmlns="http://www.w3.org/2000/svg"
+            stroke="currentColor" stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round" class="on"
-            width="20"
+            *ngSwitchCase="true" (click)="onClickDelBuddy()">
-            height="20"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.5"
-            stroke-linecap="butt"
-            stroke-linejoin="round"
-            class="on"
-            *ngSwitchCase="true"
-            (click)="onClickDelBuddy()"
-          >
             <!-- is buddy -->
             <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
             <circle cx="8.5" cy="7" r="4"></circle>
@@ -116,277 +70,106 @@
         </ng-container>
       </span>
     </div>
+    <div *ngIf="isMe" class="profile-edit">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+        <path d="M12.3 3.7l4 4L4 20H0v-4L12.3 3.7zm1.4-1.4L16 0l4 4-2.3 2.3-4-4z" /></svg>
+      </div>
+  </mat-card-header>
 
-    <ul style="padding-top: 20px;">
+  <mat-card-content>
+    <ul class="userInfo-list">
       <li>
-        <svg
+        <dt class="division">사업장</dt>
-          xmlns="http://www.w3.org/2000/svg"
+        <dd>{{ userInfo.workplace }}</dd>
-          width="20"
-          height="20"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="1.5"
-          stroke-linecap="butt"
-          stroke-linejoin="round"
-        >
-          <path
-            d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
-          ></path>
-        </svg>
-        <!-- <mat-form-field ucapInlineEditInput style="width: 100%;">
-          <input matInput [formControl]="userIntroFormControl" />
-        </mat-form-field> -->
-        <!-- <ucap-inline-edit ([value])="(userInfo.intro)"></ucap-inline-edit> -->
-        {{ userInfo.workplace }}
       </li>
       <li>
-        <svg
+        <dt class="division">담당업무/근무지</dt>
-          xmlns="http://www.w3.org/2000/svg"
+        <dd>{{ userInfo.responsibilities }}</dd>
-          width="20"
-          height="20"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="1.5"
-          stroke-linecap="butt"
-          stroke-linejoin="round"
-        >
-          <path
-            d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
-          ></path>
-        </svg>
-        <!-- <mat-form-field ucapInlineEditInput style="width: 100%;">
-          <input matInput [formControl]="userIntroFormControl" />
-        </mat-form-field> -->
-        <!-- <ucap-inline-edit ([value])="(userInfo.intro)"></ucap-inline-edit> -->
-        {{ userInfo.intro }}
       </li>
       <li>
-        <svg
+        <dt class="division">사원직무/거래처</dt>
-          xmlns="http://www.w3.org/2000/svg"
+        <dd>가나다라마바사아자차카타파하</dd>
-          width="20"
-          height="20"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="1.5"
-          stroke-linecap="butt"
-          stroke-linejoin="round"
-        >
-          <path
-            d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
-          ></path>
-          <polyline points="22,6 12,13 2,6"></polyline>
-        </svg>
-        {{ userInfo.email }}
       </li>
       <li>
-        <svg
+        <dt class="division">이메일</dt>
-          xmlns="http://www.w3.org/2000/svg"
+        <dd>{{ userInfo.email }}</dd>
-          width="20"
+      <li>
-          height="20"
+        <dt class="division">사무실</dt>
-          viewBox="0 0 24 24"
+        <dd>{{ userInfo.lineNumber }}1234567890123456789012345678901234567890</dd>
-          fill="none"
+        <button mat-mini-fab class="mat-elevation-z userInfo-call" *ngIf="!isMe" matTooltip="전화" matTooltipPosition="above"
-          stroke="currentColor"
+          [disabled]="getDisabledBtn('LINE')" (click)="onClickCall('LINE')">
-          stroke-width="1.5"
+          <svg id="레이어_1" data-name="레이어 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
-          stroke-linecap="butt"
+            <path d="M18.61,16.55c-0.42,1.03-2.29,1.97-3.12,2.01c-0.83,0.04-0.85,0.64-5.37-1.32c-4.51-1.96-7.23-6.73-7.45-7.04
-          stroke-linejoin="round"
+              C2.46,9.9,0.92,7.71,1,5.51c0.08-2.2,1.29-3.24,1.72-3.67c0.43-0.43,0.92-0.51,1.22-0.51c0.36-0.01,0.59-0.01,0.85,0
-        >
+              c0.26,0.01,0.66-0.06,1,0.85c0.34,0.91,1.16,3.14,1.26,3.37c0.1,0.23,0.17,0.49,0.01,0.78C6.91,6.63,6.82,6.81,6.59,7.06
-          <path
+              c-0.24,0.25-0.5,0.57-0.71,0.76C5.65,8.04,5.4,8.27,5.65,8.73c0.25,0.46,1.1,1.96,2.39,3.19c1.66,1.59,3.1,2.11,3.54,2.35
-            d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"
+              c0.44,0.24,0.71,0.21,0.98-0.07c0.27-0.29,1.18-1.26,1.49-1.7c0.32-0.44,0.62-0.35,1.02-0.19c0.41,0.16,2.58,1.33,3.03,1.57
-          ></path>
+              c0.44,0.24,0.74,0.36,0.84,0.55C19.05,14.62,19.02,15.52,18.61,16.55L18.61,16.55z" />
-        </svg>
+          </svg>
-        {{ userInfo.lineNumber }}
+        </button>
       </li>
       <li>
-        <svg
+        <dt class="division">핸드폰</dt>
-          xmlns="http://www.w3.org/2000/svg"
+        <dd>{{ userInfo.hpNumber }}</dd>
-          width="20"
+        <button mat-mini-fab class="mat-elevation-z userInfo-call" *ngIf="!isMe" matTooltip="모바일" matTooltipPosition="above"
-          height="20"
+          [disabled]="getDisabledBtn('MOBILE')" (click)="onClickCall('MOBILE')">
-          viewBox="0 0 24 24"
+          <svg id="레이어_1" data-name="레이어 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
-          fill="none"
+            <path d="M18.61,16.55c-0.42,1.03-2.29,1.97-3.12,2.01c-0.83,0.04-0.85,0.64-5.37-1.32c-4.51-1.96-7.23-6.73-7.45-7.04
-          stroke="currentColor"
+            	C2.46,9.9,0.92,7.71,1,5.51c0.08-2.2,1.29-3.24,1.72-3.67c0.43-0.43,0.92-0.51,1.22-0.51c0.36-0.01,0.59-0.01,0.85,0
-          stroke-width="1.5"
+            	c0.26,0.01,0.66-0.06,1,0.85c0.34,0.91,1.16,3.14,1.26,3.37c0.1,0.23,0.17,0.49,0.01,0.78C6.91,6.63,6.82,6.81,6.59,7.06
-          stroke-linecap="butt"
+            	c-0.24,0.25-0.5,0.57-0.71,0.76C5.65,8.04,5.4,8.27,5.65,8.73c0.25,0.46,1.1,1.96,2.39,3.19c1.66,1.59,3.1,2.11,3.54,2.35
-          stroke-linejoin="round"
+            	c0.44,0.24,0.71,0.21,0.98-0.07c0.27-0.29,1.18-1.26,1.49-1.7c0.32-0.44,0.62-0.35,1.02-0.19c0.41,0.16,2.58,1.33,3.03,1.57
-        >
+              c0.44,0.24,0.74,0.36,0.84,0.55C19.05,14.62,19.02,15.52,18.61,16.55L18.61,16.55z" />
-          <rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect>
+            </svg>
-          <line x1="12" y1="18" x2="12" y2="18"></line>
+        </button>
-        </svg>
-        {{ userInfo.hpNumber }}
-      </li>
-      <li>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="20"
-          height="20"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="1.5"
-          stroke-linecap="butt"
-          stroke-linejoin="round"
-        >
-          <path
-            d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
-          ></path>
-        </svg>
-        <!-- <mat-form-field ucapInlineEditInput style="width: 100%;">
-          <input matInput [formControl]="userIntroFormControl" />
-        </mat-form-field> -->
-        <!-- <ucap-inline-edit ([value])="(userInfo.intro)"></ucap-inline-edit> -->
-        {{ userInfo.responsibilities }}
-      </li>
-      <li>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="20"
-          height="20"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="1.5"
-          stroke-linecap="butt"
-          stroke-linejoin="round"
-        >
-          <path
-            d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
-          ></path>
-        </svg>
-        <!-- <mat-form-field ucapInlineEditInput style="width: 100%;">
-          <input matInput [formControl]="userIntroFormControl" />
-        </mat-form-field> -->
-        <!-- <ucap-inline-edit ([value])="(userInfo.intro)"></ucap-inline-edit> -->
-        {{ getWorkstatus(userInfo) }}
       </li>
     </ul>
+
+    <mat-card-actions>
+      <div fxFlex fxLayout="row" fxLayoutAlign="space-around center">
+        <div class="button-text-item">
+          <button mat-mini-fab  class="mat-elevation-z bg-accent-darkest" [matTooltip]="isMe ? 'MyTalk' : '1:1 대화'" matTooltipPosition="above"
+            (click)="onClickOpenChat()">
+            <svg id="레이어_1" data-name="레이어 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+              <path d="M26.57,14a9.05,9.05,0,0,0-12.82,0,9.07,9.07,0,0,0-.57,12.2,3.57,3.57,0,0,1-1.46,1.61.84.84,0,0,0-.46.89.86.86,0,0,0,.71.71,4.34,4.34,0,0,0,.71.05,5.32,5.32,0,0,0,3.19-1.06A9.07,9.07,0,0,0,26.57,14Z" transform="translate(-11.09 -11.32)"/>
+              <path d="M20.16,20.53a.14.14,0,0,1-.14-.14.14.14,0,0,1,.14-.14.14.14,0,0,1,.13.14A.13.13,0,0,1,20.16,20.53Z" transform="translate(-11.09 -11.32)"/><path class="cls-1" d="M20.16,19.75a.64.64,0,1,0,.64.64.64.64,0,0,0-.64-.64Z" transform="translate(-11.09 -11.32)"/>
+              <circle cx="12.35" cy="9.07" r="0.14"/><path class="cls-1" d="M23.44,19.75a.64.64,0,1,0,.64.64.64.64,0,0,0-.64-.64Z" transform="translate(-11.09 -11.32)"/>
+              <circle cx="5.78" cy="9.07" r="0.14"/><path class="cls-1" d="M16.88,19.75a.64.64,0,1,0,.63.64.64.64,0,0,0-.63-.64Z" transform="translate(-11.09 -11.32)"/>
+            </svg>
+          </button>
+          <span *ngIf="!isMe" class="button-text" >대화</span>
+          <span *ngIf="isMe" class="button-text">myTalk</span>
+        </div>
+
+        <div class="button-text-item" *ngIf="!isMe">
+          <button mat-mini-fab class="mat-elevation-z" *ngIf="!isMe" matTooltip="SMS" matTooltipPosition="above"
+            [disabled]="getDisabledBtn('SMS')" (click)="onClickSMS()">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+              <path
+                d="M2 2c0-1.1.9-2 2-2h12a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2zm2 0v14h12V2H4zm6 17a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" />
+              </svg>
+          </button>
+          <span class="button-text">SMS</span>
+        </div>
+
+        <div class="button-text-item" *ngIf="!isMe">
+          <button mat-mini-fab class="mat-elevation-z bg-accent-darkest" *ngIf="!isMe" matTooltip="화상회의" matTooltipPosition="above"
+            (click)="onClickVideoConference()">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+              <path d="M16 7l4-4v14l-4-4v3a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4c0-1.1.9-2 2-2h12a2 2 0 0 1 2 2v3zm-8 7a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0-2a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/></svg>
+          </button>
+          <span class="button-text">화상</span>
+        </div>
+
+        <div class="button-text-item" *ngIf="!isMe">
+          <button mat-mini-fab class="mat-elevation-z bg-accent-darkest" *ngIf="!isMe" matTooltip="쪽지" matTooltipPosition="above"
+            (click)="onClickMessage()">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+              <path d="M0 0l20 10L0 20V0zm0 8v4l10-2L0 8z" /></svg>
+          </button>
+          <span class="button-text">쪽지</span>
+        </div>
+      </div>
+    </mat-card-actions>
   </mat-card-content>
-
-  <mat-card-actions>
-    <div fxFlex fxLayout="row" fxLayoutAlign="space-around center">
-      <button
-        mat-mini-fab
-        class="mat-elevation-z"
-        [matTooltip]="isMe ? 'MyTalk' : '1:1 대화'"
-        matTooltipPosition="above"
-        (click)="onClickOpenChat()"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="butt"
-          stroke-linejoin="round"
-        >
-          <path
-            d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"
-          ></path>
-        </svg>
-      </button>
-
-      <button
-        mat-mini-fab
-        class="mat-elevation-z"
-        *ngIf="!isMe"
-        matTooltip="전화"
-        matTooltipPosition="above"
-        [disabled]="getDisabledBtn('LINE')"
-        (click)="onClickCall('LINE')"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="butt"
-          stroke-linejoin="round"
-        >
-          <path
-            d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"
-          ></path>
-        </svg>
-      </button>
-
-      <button
-        mat-mini-fab
-        class="mat-elevation-z"
-        *ngIf="!isMe"
-        matTooltip="모바일"
-        matTooltipPosition="above"
-        [disabled]="getDisabledBtn('MOBILE')"
-        (click)="onClickCall('MOBILE')"
-      >
-        <span class="mdi mdi-cellphone-android mdi-24px"></span>
-      </button>
-
-      <button
-        mat-mini-fab
-        class="mat-elevation-z"
-        *ngIf="!isMe"
-        matTooltip="SMS"
-        matTooltipPosition="above"
-        [disabled]="getDisabledBtn('SMS')"
-        (click)="onClickSMS()"
-      >
-        <span class="mdi mdi-email-outline mdi-24px"></span>
-      </button>
-
-      <button
-        mat-mini-fab
-        class="mat-elevation-z"
-        *ngIf="!isMe"
-        matTooltip="화상회의"
-        matTooltipPosition="above"
-        (click)="onClickVideoConference()"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="butt"
-          stroke-linejoin="round"
-        >
-          <path
-            d="M15.6 11.6L22 7v10l-6.4-4.5v-1zM4 5h9a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7c0-1.1.9-2 2-2z"
-          />
-        </svg>
-      </button>
-
-      <button
-        mat-mini-fab
-        class="mat-elevation-z"
-        *ngIf="!isMe"
-        matTooltip="쪽지"
-        matTooltipPosition="above"
-        (click)="onClickMessage()"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="butt"
-          stroke-linejoin="round"
-        >
-          <line class="st0" x1="18" y1="2" x2="9.2" y2="10.8" />
-          <polygon class="st0" points="18,2 12.4,18 9.2,10.8 2,7.6 " />
-        </svg>
-      </button>
-    </div>
-  </mat-card-actions>
 </mat-card>

projects/ucap-webmessenger-ui-profile/src/lib/components/profile.component.scss

@@ -13,70 +13,93 @@
   }
 }
 ::ng-deep .mat-card-header-text {
-  width: 100%;
   .mat-card-subtitle {
     color: rgb(256, 256, 256, 0.7) !important;
-    text-align: center;
-    margin-top: 10px !important;
   }
 }
 
 .example-card {
-  width: 400px;
+  display: flex;
-  padding: 0 0 20px;
+  flex-flow: row;
+  flex: 0 0 auto;
+  width: 700px;
+  height: 380px;
   position: relative;
+  padding: 0;
   .mat-card-header {
-    justify-content: center;
+    position: relative;
-    padding-bottom: 40px;
+    justify-content: flex-start;
-    background: #76d9c5;
+    flex-flow: column;
-    /*background: linear-gradient(to right, #345385, #ef4c73);*/
+    width: 260px;
+    height: 100%;
+    background: #64cddf;
     color: #ffffff;
-    padding-top: 20px;
+    padding: 20px;
-    width: 100%;
+
-    .mat-card-title {
-      margin-bottom: 12px;
-      max-width: 100%;
-      justify-content: center;
-      display: flex;
-      margin: 0 20px;
-      span {
-        @include ellipsis(1);
-      }
-    }
-  }
-  .mat-card-content {
-    margin-top: -40px;
     .profile-img {
+      position: absolute;
       display: flex;
-      height: 80px;
+      flex-flow: row;
-      justify-content: center;
+      align-items: flex-end;
-      margin-bottom: 20px;
+      top: 20px;
-      img {
+      margin-bottom: 16px;
-        widows: 80px;
+
+      &-mask {
+        width: 80px;
         height: 80px;
         border-radius: 50%;
-        background-color: #efefef;
+        overflow: hidden;
         border: 2px solid #ffffff;
+        margin-right: 10px;
+        img {
+          width: 80px;
+          height: auto;
+          background-color: #efefef;
+        }
       }
 
-      .upload-profile-image-spinner {
+      .work-status {
-        position: absolute;
+        display: inline-flex;
-        top: 90px;
+        height: 24px;
-        left: 160px;
+        background-color: #ffffff;
-      }
+        padding: 4px 14px;
-
+        border-radius: 100px;
-      .upload-profile-image-btn {
+        font-size: 13px;
-        position: absolute;
+        justify-content: center;
-        top: 140px;
+        align-items: center;
-        left: 210px;
       }
     }
-    .profile-option {
+
+    .mat-card-title {
       display: flex;
-      padding: 0 20px;
+      flex-flow: column;
-      color: #ffffff;
+      margin-top: 120px;
-      margin-top: -100px;
+      span {
-      height: 120px;
+        @include ellipsis(1);
+        &.number {
+          font-size: 0.8em;
+        }
+      }
+    }
+    .mat-card-subtitle {
+      margin-left: -16px;
+      font-size: 1.1em;
+      flex-flow: column;
+      span {
+        @include ellipsis(1);
+        &.deptName {
+          font-size: 1.2em;
+        }
+      }
+    }
+    .intro {
+      @include ellipsis(3);
+    }
+    .profile-option {
+      position: absolute;
+      bottom: 20px;
+      display: flex;
+      flex-flow: row;
       .btn-favorite {
         cursor: pointer;
         .on {
@@ -84,7 +107,7 @@
         }
       }
       .btn-groupadd {
-        margin-left: auto;
+        margin-left: 20px;
         cursor: pointer;
         svg {
           display: none;
@@ -94,23 +117,127 @@
         }
       }
     }
+    .profile-edit {
+      position: absolute;
+      bottom: 20px;
+      width: 20px;
+      height: 20px;
+      svg {
+        fill: #ffffff;
+      }
+    }
+  }
+  .mat-card-content {
+    position: relative;
+    width: 440px;
+    height: 100%;
+    padding: 20px 0;
+    margin-left: 30px;
     ul {
-      padding: 0 20px;
       display: flex;
       flex-flow: column;
-      margin-top: -20px;
       li {
-        display: inline-flex;
+        display: flex;
+        flex-direction: row;
         height: 30px;
         align-items: center;
         flex-flow: row;
-        margin-bottom: 20px;
+        margin-bottom: 16px;
+        dt {
+          width: 120px;
+          font-weight: 800;
+          @include ellipsis(1);
+        }
+        dd {
+          width: 240px;
+          margin-right: 20px;
+          @include ellipsis(1);
+        }
+      }
+    }
+    .mat-card-actions {
+      position: absolute;
+      width: 100%;
+      bottom: 0;
+      border-top: 1px solid #dddddd;
+      padding-top: 14px;
+      margin-top: auto;
+    }
+  }
+}
 
+::ng-deep .btn-upload-profile-image {
+  display: flex;
+  margin-left: -26px;
+  margin-right: 10px;
+  width: 36px;
+  height: 36px;
+  line-height: 36px;
+  justify-content: center;
+  justify-content: center;
+  &.mat-mini-fab {
+    .mat-button-wrapper {
+      display: flex;
+      justify-content: center;
+      justify-items: center;
+      padding: 0;
+    }
+  }
+}
+
+::ng-deep .userInfo-call {
+  position: relative;
+  display: flex;
+  flex: 0 0 auto;
+  width: 34px;
+  height: 34px;
+  line-height: 34px;
+  justify-content: center;
+  justify-items: center;
+  .mat-button-wrapper {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+    justify-content: center;
+    text-align: center;
+    svg {
+      fill: #ffffff;
+      display: flex;
+    }
+  }
+}
+
+::ng-deep .button-text-item {
+  display: flex;
+  button {
+    justify-content: center;
+    justify-items: center;
+    flex-flow: row;
+    &.mat-mini-fab {
+      position: relative;
+      display: flex;
+      width: 40px;
+      height: 40px;
+      line-height: 40px;
+      .mat-button-wrapper {
+        padding: 0;
+        fill: #ffffff;
+        width: 20px;
+        height: 20px;
+        display: inline-flex;
+        justify-content: center;
+        text-align: center;
         svg {
-          margin-right: 10px;
+          display: flex;
-          color: #777777;
+          width: 100%;
+          height: 100%;
         }
       }
     }
   }
+  .button-text {
+    justify-content: center;
+    align-self: center;
+    margin-left: 8px;
+  }
 }

projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html

@@ -4,14 +4,16 @@
   <span class="presence" [ngClass]="getPresence(PresenceType.PC)"> </span>
   <dl class="item-default">
     <dt>
-      <img
+      <div class="thumbnail-mask">
-        class="thumbnail"
+        <img
-        ucapImage
+          class="thumbnail"
-        [base]="profileImageRoot"
+          ucapImage
-        [path]="userInfo.profileImageFile"
+          [base]="profileImageRoot"
-        [default]="'assets/images/img_nophoto_50.png'"
+          [path]="userInfo.profileImageFile"
-        (click)="onClickOpenProfile($event, userInfo)"
+          [default]="'assets/images/img_nophoto_50.png'"
-      />
+          (click)="onClickOpenProfile($event, userInfo)"
+        />
+      </div>
     </dt>
     <dd class="info">
       <div class="detail">

projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.scss

@@ -4,7 +4,7 @@ $font-dark: #212121;
 $font-mid: #666666;
 $font-light: #848d95;
 $font-white: #ffffff;
-$line-basic:1px solid #dddddd;
+$line-basic: 1px solid #dddddd;
 $bg-list-item-msg: #f0f4f6;
 $bg-list-hover: #efefef;
 $listH-row2: 80px;
@@ -61,23 +61,21 @@ $thumbnail-msize: 40px;
 .item-default {
   display: flex;
   width: 100%;
-  dt{
+  dt {
-    flex:none;
+    flex: none;
     .thumbnail {
       width: $thumbnail-msize;
-      height: $thumbnail-msize;
+      height: auto;
-      margin-right: 16px;
-      border-radius: 50%;
     }
   }
 
-  .info{
+  .info {
     position: relative;
     display: inline-block;
     margin: 0;
     padding: 0;
     width: calc(100% - 50px);
-     .detail{
+    .detail {
       flex-flow: column;
       .name {
         font-size: 13px;
@@ -122,15 +120,15 @@ $thumbnail-msize: 40px;
           width: 100%;
         }
         .msg-status {
-          display:none;
+          display: none;
         }
       }
     }
   }
 }
 
-.org{
+.org {
-  .list-item{
+  .list-item {
-    height:70px;
+    height: 70px;
   }
-}
+}

projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html

@@ -1,13 +1,15 @@
 <div class="list-item" matRipple>
   <dl class="item-default">
     <dt>
-      <img
+      <div class="thumbnail-mask">
-        class="thumbnail"
+        <img
-        ucapImage
+          class="thumbnail"
-        [base]="sessionVerinfo.profileRoot"
+          ucapImage
-        [path]="imagePath"
+          [base]="sessionVerinfo.profileRoot"
-        [default]="defaultPath"
+          [path]="imagePath"
-      />
+          [default]="defaultPath"
+        />
+      </div>
       <span *ngIf="roomInfo.isTimeRoom" class="text-warn-color badge-timer">
         <mat-icon>timer</mat-icon>
       </span>

projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss

@@ -97,8 +97,6 @@ $thumbnail-msize: 40px;
   display: flex;
   width: 100%;
   .thumbnail {
-    width: $thumbnail-msize;
-    height: $thumbnail-msize;
     margin-right: 16px;
     border-radius: 50%;
   }

projects/ucap-webmessenger-ui/src/assets/scss/partials/_list-item.scss

@@ -1,27 +1,44 @@
 @charset 'utf-8';
 
-.ellipsis{
+.ellipsis {
   overflow: hidden;
   text-overflow: ellipsis;
   display: block;
   white-space: nowrap;
   word-wrap: normal;
 }
-.ellipsis2{
+.ellipsis2 {
   overflow: hidden;
   text-overflow: ellipsis;
-   -webkit-line-clamp: 2;
+  -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   word-wrap: break-word;
 }
-.mat-card-header .mat-card-title{
+.mat-card-header .mat-card-title {
-  margin:0 -16px;
+  margin: 0 -16px;
-  padding-bottom:10px;
+  padding-bottom: 10px;
 }
-.search-result{
+.search-result {
-  .result-num{
+  .result-num {
-    padding:10px;
+    padding: 10px;
-    display:flex;
+    display: flex;
-    height:40px;
+    height: 40px;
   }
-}
+}
+
+.list-item {
+  .thumbnail {
+    &-mask {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      overflow: hidden;
+      margin-right: 16px;
+      img {
+        width: 40px;
+        height: auto;
+        background-color: #efefef;
+      }
+    }
+  }
+}

projects/ucap-webmessenger-ui/src/lib/pipes/date.pipe.ts

@@ -101,7 +101,12 @@ export class DatePipe implements PipeTransform, OnDestroy {
   updateValue(date: any, format: string = 'L', options?: DateOptions): void {
     try {
       const value = this.dateService.get(date, format, options);
-      this.value = value;
+
+      if (value === 'Invalid date') {
+        this.value = date;
+      } else {
+        this.value = value;
+      }
     } catch (error) {
       this.value = date;
     }