수정 :: 대화 > 대화리스트에 프로필 사진 적용.

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

@@ -1,7 +1,5 @@
-  <div  fxLayout="row-reverse" class="right">
-    <div class="slide-menu" >
-    </div>
-  <div  class="slide-box">
+<div fxLayout="row-reverse" class="right">
+  <div class="slide-menu">
     slide dashboard
   </div>
 </div>

projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html

@@ -6,6 +6,7 @@
   <mat-expansion-panel
     *ngIf="favoritBuddyList.length > 0 && !checkable"
     [togglePosition]="'before'"
+    class="groupExpansionPanel"
   >
     <mat-expansion-panel-header>
       <mat-panel-title> 즐겨찾기 </mat-panel-title>

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

@@ -1,14 +1,20 @@
 <div class="list-item">
   <dl class="item-default">
     <dt>
-      <img class="thumbnail" />
+      <!-- <img class="thumbnail" /> -->
+      <ucap-ui-imaage
+        [imageClass]="'thumbnail'"
+        [base]="sessionVerinfo.profileRoot"
+        [path]="imagePath"
+        [default]="defaultPath"
+      ></ucap-ui-imaage>
     </dt>
     <dd class="info">
       <div class="detail">
         <div class="room-name">
           <div class="name">{{ getRoomName(roomInfo) }}</div>
-          <div class="num" *ngIf="roomInfo.noReadCnt > 0">
-            noReadCnt : {{ roomInfo.noReadCnt }}
+          <div class="num" *ngIf="roomInfo.roomType === RoomType.Multi">
+            {{ roomInfo.joinUserCount }}명
           </div>
         </div>
         <div class="room-msg">{{ finalEventMessage }}</div>
@@ -17,5 +23,15 @@
       <div class="date">{{ roomInfo.finalEventDate }}</div>
     </dd>
   </dl>
-  <span class="noti">1</span>
+  <!-- <span class="noti">1</span> -->
+  <span
+    class="notiBadge"
+    *ngIf="roomInfo.noReadCnt > 0"
+    [matBadgeHidden]="roomInfo.noReadCnt === 0"
+    [matBadge]="roomInfo.noReadCnt"
+    matBadgeOverlap="true"
+    matBadgeColor="accent"
+    matBadgePosition="below after"
+  >
+  </span>
 </div>

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

@@ -18,7 +18,7 @@
 
   .profile-name {
     font-size: 16px;
-    @include ellipsis(1)
+    @include ellipsis(1);
   }
 
   .profile-last-message {
@@ -93,6 +93,7 @@
         font-size: 12px;
         color: $font-mid;
         margin-top: 4px;
+        @include ellipsis(1);
       }
     }
     .date {
@@ -126,3 +127,9 @@
   @include ellipsis(1);
   @include border-radius(100px);
 }
+
+.notiBadge {
+  position: absolute !important;
+  right: 22px;
+  bottom: 22px;
+}

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

@@ -23,15 +23,17 @@ import {
 export class ListItemComponent implements OnInit {
   @Input()
   loginRes: LoginResponse;
-
   @Input()
   roomInfo: RoomInfo;
   @Input()
-  roomUserInfo: RoomUserInfo[] | UserInfoShort[];
+  roomUserInfo: (RoomUserInfo | UserInfoShort)[];
   @Input()
   sessionVerinfo: VersionInfo2Response;
 
+  imagePath: string;
+  defaultPath = 'assets/images/img_nophoto_50.png';
   finalEventMessage: string;
+  RoomType = RoomType;
 
   constructor(private logger: NGXLogger) {}
 
@@ -41,6 +43,30 @@ export class ListItemComponent implements OnInit {
     } else {
       this.finalEventMessage = this.roomInfo.finalEventMessage;
     }
+
+    switch (this.roomInfo.roomType) {
+      case RoomType.Multi:
+        this.defaultPath = 'assets/images/img_groupphoto_80.png';
+        break;
+      case RoomType.Mytalk:
+        const me = this.roomUserInfo.filter(
+          v => v.seq === this.loginRes.userSeq
+        );
+        if (!!me && me.length > 0) {
+          this.imagePath = me[0].profileImageFile;
+        }
+        break;
+      case RoomType.Single:
+      case RoomType.Bot:
+      case RoomType.Allim:
+        const others = this.roomUserInfo.filter(
+          v => v.seq !== this.loginRes.userSeq
+        );
+        if (!!others && others.length > 0) {
+          this.imagePath = others[0].profileImageFile;
+        }
+        break;
+    }
   }
 
   getRoomName(roomInfo: RoomInfo): string {

projects/ucap-webmessenger-ui-room/src/lib/ucap-ui-room.module.ts

@@ -8,6 +8,9 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { ListItemComponent } from './components/list-item.component';
+import { MatBadgeModule } from '@angular/material';
+
+import { UCapUiModule } from '@ucap-webmessenger/ui';
 
 const COMPONENTS = [ListItemComponent];
 const DIRECTIVES = [];
@@ -21,7 +24,10 @@ const SERVICES = [];
     FlexLayoutModule,
     MatFormFieldModule,
     MatIconModule,
-    MatInputModule
+    MatInputModule,
+    MatBadgeModule,
+
+    UCapUiModule
   ],
   exports: [...COMPONENTS, ...DIRECTIVES],
   declarations: [...COMPONENTS, ...DIRECTIVES]