선택된 방 chat list 에서 선택 표시

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html

@@ -54,6 +54,7 @@
     <ucap-room-list-item
       *ngFor="let room of roomList"
       [loginRes]="loginRes"
+      [isSelected]="(selectedRoomInfo$ | async)?.roomSeq === room.roomSeq"
       [roomInfo]="room"
       [roomUserInfo]="getRoomUserList(room)"
       [sessionVerinfo]="sessionVerinfo"

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.ts

@@ -64,6 +64,7 @@ export class ChatComponent implements OnInit, OnDestroy, AfterViewChecked {
 
   loginRes: LoginResponse;
   loginResSubscription: Subscription;
+  selectedRoomInfo$: Observable<RoomInfo>;
   roomSubscription: Subscription;
 
   isSearch = false;
@@ -174,6 +175,10 @@ export class ChatComponent implements OnInit, OnDestroy, AfterViewChecked {
         })
       )
       .subscribe();
+
+    this.selectedRoomInfo$ = this.store.pipe(
+      select(AppStore.MessengerSelector.RoomSelector.roomInfo)
+    );
   }
 
   ngOnDestroy(): void {

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

@@ -1,4 +1,4 @@
-<div class="list-item" matRipple>
+<div class="list-item" matRipple [ngClass]="isSelected ? 'selected' : ''">
   <dl class="item-default">
     <dt>
       <div class="thumbnail-mask">

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

@@ -35,6 +35,8 @@ export class ListItemComponent implements OnInit {
   @Input()
   loginRes: LoginResponse;
   @Input()
+  isSelected: boolean;
+  @Input()
   roomInfo: RoomInfo;
   @Input()
   roomUserInfo: (RoomUserInfo | UserInfoShort)[];