디자인 레이아웃 변경

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>

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.scss

@@ -49,3 +49,7 @@
     }
   }
 }
+.left-group-side{
+ position: relative;
+ height:100%;
+}

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"

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;
-    }
-  }*/

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"

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;
+}

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'

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 class="select-dept text-accent-color">
-      <dl>
         <dt>
           {{ getSelectedDepartmentName() }}
         </dt>
@@ -25,7 +24,6 @@
           </mat-checkbox>
         </dd>
       </dl>
-    </div>
     <div *ngIf="selectedDepartmentProcessing">
       <mat-progress-bar mode="indeterminate"></mat-progress-bar>
     </div>

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.scss

@@ -16,16 +16,17 @@
 }
 
 
-  .oraganization-tab {
+.oraganization-tab {
-    height: 100%;
+  height: 100%;
-    flex-direction: inherit;
+  flex-direction: inherit;
-    display: flex;
+  display: flex;
-    .oraganization-tab-tree {
+  .oraganization-tab-tree {
-      height:40%;
+    height:40%;
-      overflow-y: auto;
+    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{
+    display:flex;
-      border-top:1px solid #dddddd;
+    background-color: #f9f9f9;
-      height:40px;
+    dt{
-      width:100%;
+
-      display:inline-flex;
+    }
-      align-items: center;
+    dd{
-      padding:0 10px;
+      margin-left:auto;
     }
   }
   .search-list{
-    height: calc(100% - 140px);
+    height: calc(100% - 40px);
     overflow: auto;
     .list-item{
       height:70px;

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss

@@ -1,82 +1,278 @@
-@charset 'utf-8';
+/*.chat-messages {
-$line-basic: 1px solid #dddddd;
+  position: relative;
-@mixin ellipsis($row) {
+  padding: 16px 40px;
-  overflow: hidden;
+
-  text-overflow: ellipsis;
+  .message-row {
-  @if $row == 1 {
+    position: relative;
-    display: block;
+    display: flex;
-    white-space: nowrap;
+    flex-direction: column;
-    word-wrap: normal;
+    align-items: flex-start;
-  } @else if $row >= 2 {
+    justify-content: flex-end;
-    display: -webkit-box;
+    padding: 0 16px 4px 16px;
-    -webkit-line-clamp: $row;
+
-    -webkit-box-orient: vertical;
+    .avatar {
-    word-wrap: break-word;
+      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%;
+    margin-bottom: 10px;
-
+  }
-    .chat-toolbar {
+  .chat-row {
-      height: 70px;
+    position: relative;
-      min-height: 70px;
+    display: flex;
-      border-bottom: $line-basic;
+    flex-direction: row;
-      background-color: #ffffff;
+    .profile-img {
-      .chat-header {
+      flex: 0 0 auto;
-        width: 100%;
+      img{
-        .responsive-chats-button {
+        border-radius: 50%;
-          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%;
-        }
       }
     }
   }
+  &.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;
+    }
+  }
 }

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"

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;
+  overflow: auto;
-     height: calc(100% - 60px);
+  height: calc(100% - 60px);
-  }
+  .group-expansion{
+     .list-item{
+      height:70px;
+     }
+  }
+}

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">

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;
+      }
+    }
   }
 }

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 {

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
+      <mat-panel-title class="panel-title">
-        >{{ groupBuddy.group.name }}
+        <div class="title-name ellipsis">{{ groupBuddy.group.name }}</div>
-        <span>({{ groupBuddy.buddyList.length }}명)</span></mat-panel-title
+        <span class="text-accent-color number">({{ groupBuddy.buddyList.length }}명)</span>
-      >
+        </mat-panel-title>
       <mat-panel-description>
         <span class="more-spacer"></span>
         <button

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;
-}
+}
+
+.number{
+          margin-left:6px;
+          display: inline-flex;
+          flex: 0 0 auto;
+        }

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">

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;

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;
+    border: 1px solid #dddddd;
-      padding: 2px;
+    padding: 2px;
-      font-size: 14px;
+    font-size: 14px;
-      min-width: 14px;
+    min-width: 14px;
-      min-height: 14px;
+    min-height: 14px;
-      line-height: 14px;
+    line-height: 14px;
-      width:20px;
+    width:20px;
-      height:20px;
+    height:20px;
-      box-shadow: 0 1px 4px rgba(32, 33, 36, 0.1);
+    box-shadow: 0 2px 1px rgba(48, 48, 48, 0.2);
+    border-radius: 50%;
   }
 }

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"

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 {

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;
+  }
 }