디자인 수정.

projects/ucap-webmessenger-app/src/app/app.theme.scss

@@ -5,7 +5,8 @@
 // Angular Material typography
 // $input: mat-typography-level(16px, 1.125, 400) // line-height must be unitless !!!
 $typography: mat-typography-config(
-  $font-family: 'Muli, Helvetica Neue, Arial, sans-serif',
+  $font-family:
+    '나눔고딕, Malgun Gothic, 맑은고딕, Arial, Muli, Helvetica Neue, Arial, sans-serif',
   $title: mat-typography-level(20px, 32px, 600),
   $body-2: mat-typography-level(14px, 24px, 600),
   $button: mat-typography-level(14px, 14px, 600),
@@ -95,3 +96,29 @@ body.theme-pink-dark {
   // Apply the theme to the user components
   @include components-theme($pink-dark-theme);
 }
+
+// -----------------------------------------------------------------------------------------------------
+// @ Define a pink light theme --LG RED 변경 예정(샘플링)
+// -----------------------------------------------------------------------------------------------------
+
+// Define the primary, accent and warn palettes
+$pink-light-theme-primary-palette: mat-palette($lg-red);
+$pink-light-theme-accent-palette: mat-palette($mat-pink);
+$pink-light-theme-warn-palette: mat-palette($mat-red);
+
+// Create the Material theme object
+$pink-light-theme: mat-light-theme(
+  $pink-light-theme-primary-palette,
+  $pink-light-theme-accent-palette,
+  $pink-light-theme-warn-palette
+);
+
+// Add ".theme-pink-dark" class to the body to activate this theme.
+// Class name must start with "theme-" !!!
+body.theme-pink-light {
+  // Generate the Angular Material theme
+  @include angular-material-theme($pink-light-theme);
+
+  // Apply the theme to the user components
+  @include components-theme($pink-light-theme);
+}

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

@@ -1,11 +1,12 @@
 <div class="container">
-  <div>
+  <!--<div>
     LG ucap
     <button mat-icon-button aria-label="New Chat" (click)="onClickNewChat()">
       <mat-icon>chat</mat-icon>
     </button>
-  </div>
+  </div>-->
-  <mat-tab-group mat-stretch-tabs animationDuration="0ms">
+  <div class="logo">로고</div>
+  <mat-tab-group mat-stretch-tabs animationDuration="0ms" class="global-menu">
     <mat-tab>
       <ng-template mat-tab-label>
         <mat-icon>group</mat-icon>

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

@@ -6,12 +6,43 @@
 ::ng-deep .mat-tab-body-wrapper,
 ::ng-deep .mat-tab-body {
   height: 100%;
+  width:100%;
+}
+.logo{
+  position: absolute;
+  top:0;
+  left:0;
+  height:60px;
+  width:70px;
 }
-
 .container {
+  display: flex;
   height: 100%;
-
-  mat-tab-group {
-    height: 100%;
-  }
 }
+
+.mat-tab-group {
+    display: flex;
+    width:100%;
+    flex-direction: row;
+}
+
+::ng-deep .global-menu{
+  border-right:1px solid #dddddd;
+  .mat-tab-label-container{
+    border-right:1px solid #dddddd;
+    .mat-tab-list{
+      .mat-tab-labels{
+        padding-top:60px;
+        flex-flow: column;
+        height: 60%;
+        .mat-tab-label{
+          height:80px;
+        }
+      }
+      .mat-ink-bar{
+        background-color:none;
+        height:0;
+      }
+    }
+  }
+}

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

@@ -1,17 +1,22 @@
 <div>
   <div>
+    <div class="current-head">
+      <h3>그룹</h3>
+      <div class="btn-box">
+        <button mat-icon-button >
+          <mat-icon>person_add</mat-icon>
+        </button>
+        <button mat-icon-button [matMenuTriggerFor]="groupMenu" aria-label="group menu">
+          <mat-icon>more_vert</mat-icon>
+        </button>
+      </div>
+    </div>
     <ucap-organization-tenant-search
       [companyList]="companyList$ | async"
       [companyCode]="companyCode"
       (keyDownEnter)="onKeyDownEnterOrganizationTenantSearch($event)"
     ></ucap-organization-tenant-search>
-    <button
+
-      mat-icon-button
-      [matMenuTriggerFor]="groupMenu"
-      aria-label="group menu"
-    >
-      <mat-icon>more_vert</mat-icon>
-    </button>
     <mat-menu
       #groupMenu="matMenu"
       xPosition="after"

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

@@ -0,0 +1,21 @@
+.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;
+    .mat-icon-button{
+
+    }
+  }
+
+}

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

@@ -1,20 +1,20 @@
 <div class="oraganization-tab" fxLayout="column" *ngIf="departmentInfoList$ | async">
-  <div class="oraganization-tab-tree" fxFlex="50" style="overflow: scroll">
+  <div class="oraganization-tab-tree" fxFlex="40" style="overflow: scroll">
     <ucap-organization-tree [oraganizationList]="departmentInfoList$ | async"
       (selected)="onSelectedOrganization($event)"></ucap-organization-tree>
   </div>
-  <div fxFlex="50" style="overflow: scroll">
+  <div fxFlex="60" >
-    <div>
+    <div class="select-dept">
       (선택된부서명)
     </div>
-    <div>
+    <div class="select-list" >
       <ucap-profile-user-list-item *ngFor="let userInfo of selectedDepartmentUserInfoList$ | async"
         [userInfo]="userInfo" [checkable]="true" [sessionVerinfo]="sessionVerinfo" [selectedUserList]="selectedUserList"
         [isChecked]="getCheckedUser(userInfo)" (checkUser)="onCheckUser($event)">
       </ucap-profile-user-list-item>
     </div>
-    <div *ngIf="!isUserSelect">
+  </div>
-      (하단버튼영역)
+  <div *ngIf="!isUserSelect" class="btn-box">
-    </div>
+    (하단버튼영역)
   </div>
 </div>

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

@@ -2,6 +2,28 @@
   height: 100%;
 
   .oraganization-tab-tree {
-    overflow: scroll;
+    overflow-y: auto;
   }
 }
+.btn-box{
+  height:80px;
+  position: absolute;
+  bottom:0;
+  border-top:1px solid #ddd;
+  align-items: center;
+  width:100%;
+  background-color:#ffffff;
+}
+.select-dept{
+  border-top:1px solid #dddddd;
+  height:40px;
+  width:100%;
+  display:inline-flex;
+  align-items: center;
+  padding:0 10px;
+}
+.select-list{
+    height: calc(100% - 120px);
+    overflow: auto;
+}
+

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

@@ -2,8 +2,8 @@
 <div class="container" fxFlex fxLayout="column">
   <!-- CHAT TOOLBAR -->
   <mat-toolbar class="chat-toolbar">
-    <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
+    <div fxFlex fxLayout="row" class="chat-header" >
-      <div fxLayout="row" fxLayoutAlign="start center">
+      <div fxLayout="row" fxLayoutAlign="start center" class="profile-img">
         <!-- RESPONSIVE CHATS BUTTON-->
         <button
           mat-icon-button
@@ -15,8 +15,10 @@
         </button>
         <!-- / RESPONSIVE CHATS BUTTON-->
       </div>
-
+      <div class="room-name">
-      <div>
+        대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명
+      </div>
+      <div class="room-option">
         <button
           *ngIf="!!roomInfo"
           mat-icon-button

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

@@ -1,3 +1,5 @@
+@charset 'utf-8';
+@import '../../../../assets/scss/global/common';
 :host {
   display: flex;
   width: 100%;
@@ -9,12 +11,32 @@
     height: 100%;
 
     .chat-toolbar {
-      height: 49px;
+      height: 70px;
-      min-height: 49px;
+      min-height: 70px;
-      border-bottom: 1px solid;
+      border-bottom: $line-basic;
-
+      background-color:#ffffff;
-      .responsive-chats-button {
+      .chat-header{
-        padding: 0;
+        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;
+        }
       }
     }
 

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

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

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

@@ -0,0 +1,16 @@
+$right-color:#565e6b;
+.right{
+  height:100%;
+  flex-direction: row-reverse;
+  border-left:1px solid #dddddd;
+  .slide-menu{
+    width:70px;
+    height:100%;
+    display:inline-flex;
+    background-color:$right-color;
+  }
+  .slide-box{
+    display:inline-flex;
+    height:100%;
+  }
+}

projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss

@@ -1,14 +1,16 @@
 .container {
   height: 100%;
+  display:flex;
+  flex-flow: row;
 
   .left-side {
-    float: left;
+    width: 380px;
-    width: 300px;
     height: 100%;
+    flex: 0 0 auto;
   }
   .contents {
-    float: left;
+    flex:1 1 auto;
-    width: calc(100% - 360px);
+    min-width:400px;
     height: 100%;
 
     .messages {
@@ -17,8 +19,7 @@
     }
   }
   .right-side {
-    float: left;
-    width: 60px;
     height: 100%;
+    flex: 0 0 auto;
   }
 }

projects/ucap-webmessenger-app/src/app/pages/template/components/template.page.component.html

@@ -1,17 +1,34 @@
 <div class="template" fxLayout="column">
-  <button mat-raised-button color="accent" class="submit-button" aria-label="Login" (click)="onClickLogin()">
+  <button
+    mat-raised-button
+    color="accent"
+    class="submit-button"
+    aria-label="Login"
+    (click)="onClickLogin()"
+  >
     Login
   </button>
 
   <h3>User-list-item</h3>
   <div>
-    <ucap-profile-user-list-item [userInfo]="userInfo" [profileImageRoot]="profileImageRoot" [presence]="presence"
+    <ucap-profile-user-list-item
-      [sessionVerinfo]="sessionVerinfo">
+      [userInfo]="userInfo"
+      [profileImageRoot]="profileImageRoot"
+      [presence]="presence"
+      [sessionVerinfo]="sessionVerinfo"
+    >
     </ucap-profile-user-list-item>
-    <ucap-profile-user-list-item [userInfo]="userInfo" [sessionVerinfo]="sessionVerinfo">
+    <ucap-profile-user-list-item
+      [userInfo]="userInfo"
+      [sessionVerinfo]="sessionVerinfo"
+    >
     </ucap-profile-user-list-item>
-    <ucap-profile-user-list-item [userInfo]="userInfo" [profileImageRoot]="profileImageRoot" [checkable]="true"
+    <ucap-profile-user-list-item
-      [sessionVerinfo]="sessionVerinfo">
+      [userInfo]="userInfo"
+      [profileImageRoot]="profileImageRoot"
+      [checkable]="true"
+      [sessionVerinfo]="sessionVerinfo"
+    >
     </ucap-profile-user-list-item>
   </div>
   <h3>Organization</h3>
@@ -21,14 +38,20 @@
         Tenant Search
       </div>
       <div>
-        <ucap-organization-tenant-search [companyList]="companyList" [companyCode]="companyCode">
+        <ucap-organization-tenant-search
+          [companyList]="companyList"
+          [companyCode]="companyCode"
+        >
         </ucap-organization-tenant-search>
       </div>
     </div>
   </div>
   <h3>Chat</h3>
   <div>
-    <ucap-room-list-item [roomInfo]="roomInfo" [sessionVerinfo]="sessionVerinfo">
+    <ucap-room-list-item
+      [roomInfo]="roomInfo"
+      [sessionVerinfo]="sessionVerinfo"
+    >
     </ucap-room-list-item>
   </div>
   <!-- <h3>Chat::MessageBox</h3>

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

@@ -1,13 +1,22 @@
 @charset 'utf-8';
 
-$listH-row3: 90px;
+$listH-row3: 120px;
-$listH-row2: 60px;
+$listH-row2: 90px;
+$listH-row2-s: 70px;
 $checkbox-size: 16px;
-$presence-size: 10px;
+$presence-size: 8px;
 $thumbnail-msize: 40px;
 $bg-list-hover: #efefef;
 $bg-list-item-msg: #f0f4f6;
 
+$font-dark: #212121;
+$font-mid: #666666;
+$font-light: #848d95;
+$font-white: #ffffff;
+
+$line-basic: 1px solid #dddddd;
+$color-main: #ee278b;
+
 @mixin ellipsis($row) {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -41,6 +50,3 @@ $bg-list-item-msg: #f0f4f6;
     background-color: #f0c10a;
   }
 }
-@function position-m($h, $o, $p) {
-  @return ($h - $o - $p) / 2;
-}

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

@@ -13,7 +13,7 @@ body {
   color: #333;
   font-family: '나눔고딕', Malgun Gothic, '맑은고딕', Arial, Dotum, '돋움',
     Gulim, '굴림';
-  font-size: 12px;
+  font-size: 13px;
   line-height: 18px !important;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;

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

@@ -4,6 +4,18 @@
   fxLayout="row"
   fxLayoutAlign="center center"
 >
+  <div class="add-option">
+    <i class="material-icons">
+      attach_file
+    </i>
+    <i class="material-icons">
+      sentiment_satisfied_alt
+    </i>
+    <i class="material-icons">
+      g_translate
+    </i>
+  </div>
+
   <form
     #replyForm="ngForm"
     (ngSubmit)="onSend($event)"
@@ -35,7 +47,9 @@
       type="submit"
       aria-label="Send message"
     >
-      Send
+      <i class="material-icons">
+        send
+      </i>
     </button>
   </form>
 </div>

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

@@ -1,6 +1,44 @@
 .container {
   display: flex;
+  flex-direction: column;
   width: 100%;
   height: 100%;
   flex: 1;
+  padding: 20px 30px;
+  .add-option {
+    display: inline-flex;
+    margin-right: 20px;
+    i {
+      font-size: 20px;
+      color: #666;
+      width:30px;
+      height:30px;
+      text-align: center;
+      line-height: 30px;
+      &:hover {
+      color: #333333;
+      background-color: #efefef;
+      border-radius: 50%;
+      }
+    }
+  }
+}
+.mat-form-field-underline{
+  background-color:none;
+}
+.send-message-button {
+  margin-left: 20px;
+  i {
+    background-color: #ff3399;
+    display: inline-block;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    line-height:40px;
+    font-size: 20px;
+    color: #ffffff;
+    &:hover{
+      background-color: #333333;
+    }
+  }
 }

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

@@ -1,15 +1,19 @@
-<ul>
+<div class="bubble-main">
-  <li>
+  <!--파일명에 따라 doc exe hwp ppt xls zip 으로 추가되고 나머지 파일 명은 file로 기간이 만료된 파일은 그뒤에 disable도 추가-->
-    {{ fileInfo.FileName }}
+  <div class="file-img ppt"></div>
-  </li>
+  <ul class="file-info">
-  <li>
+    <li class="file-name">
-    {{ fileInfo.AttSize }}
+      {{ fileInfo.FileName }}
-  </li>
+    </li>
-  <li>
+    <li class="file-size">
-    {{ fileInfo.FileExt }}
+      {{ fileInfo.AttSize }}
-  </li>
+    </li>
-</ul>
+    <li class="file-ext">
-<span *ngIf="fileInfo && fileInfo.AttSEQ">
+      {{ fileInfo.FileExt }}
+    </li>
+  </ul>
+</div>
+<div *ngIf="fileInfo && fileInfo.AttSEQ" class="btn-box">
   <ul>
     <li>
       <button mat-button (click)="onClickSave()">Save</button>
@@ -18,4 +22,4 @@
       <button mat-button (click)="onClickSaveAs()">Save As</button>
     </li>
   </ul>
-</span>
+</div>

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.scss

@@ -0,0 +1,103 @@
+@charset "UTF-8"
+.bubble-main {
+  display: flex;
+  flex-direction: row;
+  padding: 14px;
+  .file-img {
+    display: inline-flex;
+    width: 50px;
+    height: 50px;
+    float: left;
+    margin-right: 14px;
+    background-repeat: no-repeat;
+    &.doc {
+      background-image: url(/assets/images/file/icon_talk_doc.png);
+      &.disable{
+        background-image: url(/assets/images/file/icon_talk_doc_d.png);
+      }
+    }
+    &.exe {
+      background-image: url(/assets/images/file/icon_talk_exe.png);
+       &.disable{
+        background-image: url(/assets/images/file/icon_talk_exe_d.png);
+      }
+    }
+    &.file {
+      background-image: url(/assets/images/file/icon_talk_file.png);
+       &.disable{
+        background-image: url(/assets/images/file/icon_talk_file_d.png);
+      }
+    }
+    &.hwp {
+      background-image: url(/assets/images/file/icon_talk_hwp.png);
+       &.disable{
+        background-image: url(/assets/images/file/icon_talk_hwp_d.png);
+      }
+    }
+    &.ppt {
+      background-image: url(/assets/images/file/icon_talk_ppt.png);
+       &.disable{
+        background-image: url(/assets/images/file/icon_talk_ppt_d.png);
+      }
+    }
+    &.xls {
+      background-image: url(/assets/images/file/icon_talk_xls.png);
+       &.disable{
+        background-image: url(/assets/images/file/icon_talk_xls_d.png);
+      }
+    }
+    &.zip {
+      background-image: url(/assets/images/file/icon_talk_zip.png);
+       &.disable{
+        background-image: url(/assets/images/file/icon_talk_doc_d.png);
+      }
+    }
+  }
+  .file-info {
+    display: inline-flex;
+    flex-direction: column;
+    text-align: left;
+    float: left;
+    line-height: 1.6em;
+    .file-name {
+      font-size: 14px;
+      font-weight: bold;
+      display: inline-flex;
+    }
+    .file-size {
+      display: inline-flex;
+      font-size: 11px;
+      color: #666666;
+    }
+    .file-ext {
+      font-size: 12px;
+      color: #848d95;
+    }
+  }
+}
+.btn-box {
+  width: 100%;
+  height: 40px;
+  border-top: 1px solid #dddddd;
+  display: flex;
+  width: 100%;
+  text-align: center;
+  ul {
+    width: 100%;
+    li {
+      width: 50%;
+      display: inline-block;
+      text-align: center;
+      align-items: center;
+      font-size: 13px;
+      border-right:1px solid #dddddd;
+      &:last-child{
+        border-right:none;
+      }
+      .mat-button {
+        width: 100%;
+        display: block;
+      }
+    }
+  }
+}

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

@@ -1,4 +1,6 @@
-<p>
+<div class="date-split">
+  <span class="line"></span>
   <!-- {{ message.sendDate | date: 'short' }} -->
-  {{ dateInfo }}
+  <span class="date">{{ dateInfo }}2019.10.3</span>
-</p>
+  <span class="line"></span>
+</div>

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/date-splitter.component.scss

@@ -0,0 +1,19 @@
+@charset 'utf-8';
+.date-split {
+  display: flex;
+  align-content: center;
+  flex-flow: row;
+  .line {
+    height: 1px;
+    background-color: #cccccc;
+    width:40%;
+    flex:1 1 auto;
+    margin-bottom:10px;
+  }
+  .date {
+    width: 160px;
+    font-size: 13px;
+    text-align: center;
+    font-weight: 500;
+  }
+}

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

@@ -1 +1,3 @@
-<img [src]="fileInfo.ThumbURL">
+<div  class="bubble-main">
+  <img [src]="fileInfo.ThumbURL">
+</div>

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/image.component.scss

@@ -0,0 +1,3 @@
+.bubble-main{
+  padding:10px;
+}

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

@@ -1,12 +1,12 @@
-<p>
+<div class="bubble-main">
   <span>
     {{ content }}
   </span>
   <span>
     {{ message.sendDate | date: 'short' }}
   </span>
+</div>
   {{detailButteonShow}}
-  <span *ngIf="detailButteonShow">
+<div *ngIf="detailButteonShow" class="btn-box">
     <button mat-button (click)="onClickDetailView()">Detail View</button>
-  </span>
+</div>
-</p>

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass.component.scss

@@ -0,0 +1,13 @@
+@charset "UTF-8"
+.bubble-main {
+  padding: 14px;
+  text-align: left;
+}
+.btn-box {
+  border-top: 1px solid #dddddd;
+  height: 40px;
+  .mat-button {
+    width: 100%;
+    display: block;
+  }
+}

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

@@ -0,0 +1,18 @@
+<div class="event-main">
+  <div class="event-header">이벤트제목</div>
+  <ul class="event-info">
+    <li class="event-title">
+      이벤트 타일틀이벤트 타일틀이벤트 타일틀이벤트 타일틀이벤트 타일틀이벤트 타일틀이벤트 타일틀이벤트 타일틀이벤트 타일틀이벤트 타일틀이벤트 타일틀이벤트 타일틀
+    </li>
+    <li class="event-date">
+      <span>날짜</span> 2019.09.30
+    </li>
+    <li class="event-time">
+      <span>시간</span>오후 10시
+    </li>
+  </ul>
+
+  <div class="btn-box">
+    <button mat-button (click)="onClickSave()">상세보기</button>
+  </div>
+</div>

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

@@ -0,0 +1,43 @@
+@charset "UTF-8"
+.event-main {
+  flex-direction: column;
+  text-align: left;
+  .event-header {
+    padding: 10px;
+    background-color: #efefef;
+    text-align: center;
+    font-size: 14px;
+    font-weight: 600;
+  }
+  .event-info {
+    padding: 10px 14px;
+    line-height: 1.6em;
+    li {
+      margin-bottom: 4px;
+      &.event-title {
+        border-bottom: 1px solid #dddddd;
+        margin-bottom: 10px;
+        padding-bottom: 10px;
+        font-size: 14px;
+      }
+      &.event-date,
+      &.event-time {
+        color: #666666;
+      }
+      span {
+        padding: 2px 6px;
+        background-color: #efefef;
+        margin-right: 10px;
+      }
+    }
+  }
+
+  .btn-box {
+    border-top: 1px solid #dddddd;
+    height: 40px;
+    .mat-button {
+      width: 100%;
+      display: block;
+    }
+  }
+}

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

@@ -1,3 +1,4 @@
+<div class="bubble-main">
 <ul>
   <li *ngIf="stickerUrl">
     <img [src]="stickerUrl" onerror="this.src='assets/sticker/sticker_default.png'">
@@ -6,3 +7,4 @@
     {{ contentJson.chat }}
   </li>
 </ul>
+</div>

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/sticker.component.scss

@@ -0,0 +1,6 @@
+.bubble-main{
+  padding:14px;
+  li:nth-child(2){
+    margin-top:10px;
+  }
+}

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

@@ -1,5 +1,7 @@
-<p>
+<div class="bubble-main">
   <span>
     {{ message.sentMessage }}
   </span>
-</p>
+</div>
+
+

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/text.component.scss

@@ -0,0 +1,4 @@
+.bubble-main {
+  padding: 14px;
+  text-align:left;
+}

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

@@ -0,0 +1,20 @@
+<div class="translation-main">
+  <div class="original">
+    {{ message.sentMessage }}
+  </div>
+  <div class="translation">
+    <span class="language">Kor</span>
+    녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문
+    롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트
+  </div>
+  <div class="btn-box">
+    <ul>
+      <li>
+        <button mat-button>Save</button>
+      </li>
+      <li>
+        <button mat-button><span class="language">Kor</span>번역보기</button>
+      </li>
+    </ul>
+  </div>
+</div>

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/translation.component.scss

@@ -0,0 +1,46 @@
+@charset "UTF-8"
+.translation-main {
+  text-align: left;
+  .original {
+    padding: 14px;
+  }
+  .translation {
+    padding: 10px;
+    border-top: 1px solid #dddddd;
+  }
+}
+.language {
+  padding: 2px 6px;
+  background-color: #222222;
+  margin-right: 6px;
+  border-radius: 2px;
+  font-size: 11px;
+  color: #fff;
+  margin-right: 10px;
+}
+.btn-box {
+  width: 100%;
+  height: 40px;
+  border-top: 1px solid #dddddd;
+  display: flex;
+  width: 100%;
+  text-align: center;
+  ul {
+    width: 100%;
+    li {
+      width: 50%;
+      display: inline-block;
+      text-align: center;
+      align-items: center;
+      font-size: 13px;
+      border-right: 1px solid #dddddd;
+      &:last-child {
+        border-right: none;
+      }
+      .mat-button {
+        width: 100%;
+        display: block;
+      }
+    }
+  }
+}

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

@@ -1,11 +1,24 @@
-<ul>
+<div class="bubble-main">
-  <li>
+  <div class="file-img video"></div>
-    {{ fileInfo.FileName }}
+  <ul class="file-info">
-  </li>
+    <li class="file-name">
-  <li>
+      {{ fileInfo.FileName }}
-    {{ fileInfo.AttSize }}
+    </li>
-  </li>
+    <li class="file-size">
-  <li>
+      {{ fileInfo.AttSize }}
-    {{ fileInfo.FileExt }}
+    </li>
-  </li>
+    <li class="file-ext">
-</ul>
+      {{ fileInfo.FileExt }}
+    </li>
+  </ul>
+</div>
+<span  class="btn-box">
+  <ul>
+    <li>
+      <button mat-button >Save</button>
+    </li>
+    <li>
+      <button mat-button >Save As</button>
+    </li>
+  </ul>
+</span>

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video.component.scss

@@ -0,0 +1,62 @@
+@charset "UTF-8"
+.bubble-main{
+  flex-direction: column;
+  padding:14px;
+  .file-img {
+    display: inline-flex;
+    width: 50px;
+    height: 50px;
+    float: left;
+    margin-right: 14px;
+    background-repeat: no-repeat;
+    &.video {
+      background-image: url(/assets/images/file/icon_talk_video.png);
+      &.disable{
+        background-image: url(/assets/images/file/icon_talk_video_d.png);
+      }
+    }
+  }
+  .file-info{
+    display:inline-flex;
+     flex-direction: column;
+     text-align: left;
+     line-height:1.6em;
+    .file-name{
+      font-size:14px;
+      font-weight:bold;
+      display:inline-flex
+    }
+    .file-size{
+      display:inline-flex;
+      font-size:11px;
+      color:#666666;
+    }
+    .file-ext{
+      font-size:12px;
+    }
+  }
+}
+.btn-box{
+  width:100%;
+  height:40px;
+  border-top:1px solid #dddddd;
+  display:flex;
+  ul{
+    width:100%;
+    li{
+      width:50%;
+      display:inline-block;
+      text-align:center;
+      align-items: center;
+      font-size:13px;
+       border-right:1px solid #dddddd;
+      &:last-child{
+        border-right:none;
+      }
+      .mat-button {
+        width: 100%;
+        display: block;
+      }
+    }
+  }
+}

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

@@ -1,5 +1,8 @@
 <div class="chat-messages">
   <!-- MESSAGE -->
+  <ucap-chat-message-box-date-splitter *ngIf="getDateSplitter(i)" [message]="message">
+  </ucap-chat-message-box-date-splitter>
+
   <div
     *ngFor="let message of messages; let i = index"
     class="message-row"
@@ -8,11 +11,6 @@
       contact: message.senderSeq !== loginRes.userSeq
     }"
   >
-    <ucap-chat-message-box-date-splitter
-      *ngIf="getDateSplitter(i)"
-      [message]="message"
-    >
-    </ucap-chat-message-box-date-splitter>
 
     <div
       *ngIf="getIsInformation(message); then information; else contents"
@@ -47,9 +45,7 @@
       </ng-container>
     </ng-template>
     <ng-template #contents>
-      <div>
+      <div *ngIf="getUserProfile(message.senderSeq) != ''" class="profile-img">
-        <ul>
-          <li *ngIf="getUserProfile(message.senderSeq) != ''">
             <!-- <img
               class="avatar"
               style="width: 50px; height: 50px;"
@@ -70,61 +66,64 @@
               [path]="getUserProfile(message.senderSeq)"
               [default]="'assets/images/img_nophoto_50.png'"
             ></ucap-ui-imaage>
-          </li>
-          <li>
-            {{ getUserName(message.senderSeq) }}
-          </li>
-        </ul>
       </div>
 
-      <ng-container
+      <div class="message-main">
-        class="bubble"
+        <div class="chat-name">
-        *ngIf="message.type !== EventType.NotificationForTimerRoom"
+            {{ getUserName(message.senderSeq) }}
-        [ngSwitch]="message.type"
-      >
-        <ucap-chat-message-box-mass
-          *ngSwitchCase="EventType.MassText"
-          [message]="message"
-          (massDetail)="onMassDetail($event)"
-        >
-        </ucap-chat-message-box-mass>
-        <ucap-chat-message-box-file
-          *ngSwitchCase="EventType.File"
-          [message]="message"
-          (save)="onSave($event)"
-          (imageViewer)="onImageViewer($event)"
-        >
-        </ucap-chat-message-box-file>
-        <ucap-chat-message-box-sticker
-          *ngSwitchCase="EventType.Sticker"
-          [message]="message"
-        >
-        </ucap-chat-message-box-sticker>
-        <ucap-chat-message-box-recall
-          *ngSwitchCase="EventType.RecalledMessage"
-        ></ucap-chat-message-box-recall>
-        <ucap-chat-message-box-text
-          *ngSwitchCase="EventType.Character"
-          [message]="message"
-          (contextmenu)="onContextMenuMessage($event, message)"
-        >
-        </ucap-chat-message-box-text>
-        <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
-          <ucap-chat-message-box-video-conference></ucap-chat-message-box-video-conference>
-
-          <div class="message">
-            {{ message.sentMessage }}
-          </div>
         </div>
-      </ng-container>
+
+      <div class="bubble">
+        <ng-container
+          class="bubble"
+          *ngIf="message.type !== EventType.NotificationForTimerRoom"
+          [ngSwitch]="message.type"
+        >
+          <ucap-chat-message-box-mass
+            *ngSwitchCase="EventType.MassText"
+            [message]="message"
+            (massDetail)="onMassDetail($event)"
+          >
+          </ucap-chat-message-box-mass>
+          <ucap-chat-message-box-file
+            *ngSwitchCase="EventType.File"
+            [message]="message"
+            (save)="onSave($event)"
+            (imageViewer)="onImageViewer($event)"
+          >
+          </ucap-chat-message-box-file>
+          <ucap-chat-message-box-sticker
+            *ngSwitchCase="EventType.Sticker"
+            [message]="message"
+          >
+          </ucap-chat-message-box-sticker>
+          <ucap-chat-message-box-recall
+            *ngSwitchCase="EventType.RecalledMessage"
+          ></ucap-chat-message-box-recall>
+          <ucap-chat-message-box-text
+            *ngSwitchCase="EventType.Character"
+            [message]="message"
+            (contextmenu)="onContextMenuMessage($event, message)"
+          >
+          </ucap-chat-message-box-text>
+          <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
+            <ucap-chat-message-box-video-conference></ucap-chat-message-box-video-conference>
+
+            <div class="message">
+              {{ message.sentMessage }}
+            </div>
+          </div>
+        </ng-container>
+      </div>
+    </div>
 
       <div class="time secondary-text">
         {{ message.sendDate | date: 'a hh:mm' }}

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

@@ -1,6 +1,6 @@
-.chat-messages {
+/*.chat-messages {
   position: relative;
-  padding: 16px 0 40px 40px;
+  padding: 16px 40px;
 
   .message-row {
     position: relative;
@@ -129,3 +129,126 @@
     }
   }
 }
+*/
+$otherBox-line: #cccccc;
+$otherBox-bg: #ffffff;
+$meBox-line: #cccccc;
+$meBox-bg: #ffffff;
+
+.chat-messages {
+  padding: 30px 40px;
+  display: flex;
+  flex-direction: column;
+  .message-row {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    &.me {
+      flex-direction: row-reverse;
+      .profile-info {
+        flex-direction: row-reverse;
+        display: flex;
+        justify-content: flex-end;
+      }
+    }
+  }
+}
+
+.message-row {
+  margin-bottom: 30px;
+  .profile-img {
+    flex: 0 0 auto;
+  }
+  .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;
+    word-wrap: break-word;
+    white-space: nowrap;
+  }
+
+}
+
+.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-ui-group/src/lib/components/expansion-panel.component.html

@@ -24,6 +24,7 @@
   <mat-expansion-panel
     *ngFor="let groupBuddy of groupBuddyList"
     [togglePosition]="'before'"
+    class="groupExpansionPanel"
   >
     <mat-expansion-panel-header>
       <mat-panel-title> {{ groupBuddy.group.name }} </mat-panel-title>

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

@@ -5,5 +5,42 @@
 
   .more-spacer {
     flex: 1 1 auto;
+    width: 20px;
+  }
+
+}
+
+::ng-deep .groupExpansionPanel .mat-expansion-panel-body {
+    padding: 0;
+}
+.mat-expansion-panel-header{
+  height:40px ! important;
+  padding: 0 20px;
+ .mat-expansion-panel-header-title {
+   align-items: center;
+   font-size: 13px;
+  }
+  .mat-expansion-panel-header-description{
+    margin-right:0;
   }
 }
+
+
+.mat-icon-button {
+  margin-right: 0;
+  width: inherit;
+}
+.mat-icon {
+  font-size: 20px;
+}
+.groupList {
+  .mat-expansion-panel-header {
+    padding: 0 20px;
+    .mat-content {
+      color: #666666;
+    }
+  }
+}
+.box-more-spacer {
+  margin-right: 0;
+}

projects/ucap-webmessenger-ui-organization/src/lib/components/tenant-search.component.html

@@ -1,5 +1,5 @@
-<div>
+<div class="list-search">
-  <div>
+  <div class="selectbox">
     <mat-select [(value)]="companyCode">
       <mat-option
         *ngFor="let company of companyList"
@@ -9,12 +9,27 @@
       </mat-option>
     </mat-select>
   </div>
-  <div>
+  <div class="searchbox">
     <input
       matInput
       #searchWordInput
       placeholder="name"
       (keydown.enter)="onKeyDownEnter(searchWordInput.value)"
     />
+    <div class="btn-search"><i class="material-icons">search</i></div>
   </div>
 </div>
+
+<!--검색창만 있는 경우--------------------------------------------------------------------------
+<div class="list-search">
+  <div class="searchbox">
+    <input
+      matInput
+      #searchWordInput
+      placeholder="name"
+      (keydown.enter)="onKeyDownEnter(searchWordInput.value)"
+    />
+    <div class="btn-search"><i class="material-icons">search</i></div>
+  </div>
+</div>
+-->

projects/ucap-webmessenger-ui-organization/src/lib/components/tenant-search.component.scss

@@ -1,3 +1,4 @@
+@charset 'utf-8';
 .organization-tree {
   ul,
   li {
@@ -10,3 +11,39 @@
     display: none;
   }
 }
+
+.list-search {
+  display: flex;
+  flex-direction: row;
+  height: 60px;
+  align-items: center;
+  padding: 0 20px;
+  font-size: 14px;
+  border-bottom: 1px solid #dddddd;
+  .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;
+    }
+  }
+}
+.selectbox {
+  display: inline-flex;
+  width: 45%;
+  margin-right: 1%;
+}
++ .searchbox {
+  width: 54%;
+  display: inline-flex;
+}

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

@@ -13,14 +13,15 @@
   </mat-nested-tree-node>
   <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChildren">
     <li>
-      <div class="mat-tree-node" (click)="onClickNode(node)">
+      <div class="mat-tree-node" (click)="onClickNode(node)" class="path">
         <button
           mat-icon-button
           matTreeNodeToggle
           [attr.aria-label]="'toggle ' + node.filename"
         >
           <mat-icon class="mat-icon-rtl-mirror">
-            {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}
+           <!-- {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}-->
+              {{ treeControl.isExpanded(node) ? 'remove' : 'add' }}
           </mat-icon>
         </button>
         {{ node.title }}
@@ -28,7 +29,7 @@
       <ul
         [class.organization-tree-node-invisible]="!treeControl.isExpanded(node)"
       >
-        <div *ngIf="treeControl.isExpanded(node)">
+        <div *ngIf="treeControl.isExpanded(node)" class="boxnone">
           <ng-container matTreeNodeOutlet></ng-container>
         </div>
       </ul>

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

@@ -1,12 +1,61 @@
 .organization-tree {
+  padding:10px;
   ul,
   li {
     margin-top: 0;
     margin-bottom: 0;
     list-style-type: none;
+    padding-left: 6px;
   }
 
   .organization-tree-node-invisible {
     display: none;
   }
 }
+.mat-tree-node {
+  min-height: 30px;
+  font-size: 13px;
+  padding-left:20px;
+  margin-top:4px;
+  &:hover {
+    background-color: #f4f4f4;
+    border:1px solid #cccccc;
+    border-radius:4px;
+    box-shadow: 0 1px 4px rgba(32, 33, 36, 0.1);
+  }
+}
+
+
+.path {
+  //border: 1px solid #dddddd;
+  padding: 4px;
+  margin-top: 10px;
+  //box-shadow: 0 1px 4px rgba(32, 33, 36, 0.1);
+  + ul{
+    li:last-chlid{
+      border-bottom:1px solid #dddddd;
+    }
+  }
+}
+.mat-icon-button{
+  padding: 0;
+  min-width: 0;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  line-height: 20px;
+  margin-right:10px;
+  .mat-icon-rtl-mirror{
+      line-height: 14px;
+      font-size: 14px;
+      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);
+  }
+}

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

@@ -39,12 +39,14 @@
           {{ userInfo.deptName }}
         </span>
       </div>
-      <div
+      <!-- 상태메시지 제외
+        <div
         class="msg-status"
         *ngIf="!checkable && userInfo.intro.trim() && !compactable"
       >
         {{ userInfo.intro }}
       </div>
+    -->
     </dd>
   </dl>
   <mat-checkbox

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

@@ -1,5 +1,6 @@
 @charset 'utf-8';
-@import '../../../../ucap-webmessenger-app/src/assets/scss/global/common.scss';
+@import '../../../../ucap-webmessenger-app/src/assets/scss/global/common';
+
 
 %list-item {
   position: relative;
@@ -7,17 +8,17 @@
   align-items: center;
   width: 100%;
   height: $listH-row2;
-  border-bottom: 1px solid #dddddd;
+  border-bottom: $line-basic;
-  padding: 0 10px;
+  padding: 20px;
 }
 %presence {
   display: inline-block;
   width: $presence-size;
   height: $presence-size;
-  //margin-top: position-m($listH-row2, $presence-size, 0);
+  align-self: flex-start;
   align-items: center;
   text-indent: -10000000px;
-  margin-right: 8px;
+  margin-right: 4px;
   border-radius: 100px;
 }
 %msg-status {
@@ -28,7 +29,7 @@
   padding: 2px 6px;
   vertical-align: middle;
   align-items: center;
-  @include ellipsis(20);
+  @include ellipsis(2);
   @include border-radius(4px);
 }
 
@@ -60,51 +61,49 @@
 .item-default {
   display: flex;
   width: 100%;
-  .thumbnail {
+  dt{
-    width: $thumbnail-msize;
+    flex:none;
-    height: $thumbnail-msize;
+    .thumbnail {
-    margin-right: 12px;
+      width: $thumbnail-msize;
-    @include border-radius(100px);
+      height: $thumbnail-msize;
+      margin-right: 16px;
+      @include border-radius(50%);
+    }
   }
-  .info {
+
+  .info{
     position: relative;
     display: inline-block;
     margin: 0;
     padding: 0;
     width: calc(100% - 50px);
-    .detail {
+     .detail{
-      display: inline-block;
+      flex-flow: column;
-      float: left;
       .name {
-        font-size: 14px;
+        font-size: 13px;
         margin-bottom: 2px;
+        color: $font-dark;
         @include ellipsis(1);
         b {
-          font-weight: bold;
+          font-size: 16px;
+          font-weight: 600;
         }
       }
       .dept {
         font-size: 12px;
+        color: $font-mid;
         @include ellipsis(1);
       }
-    }
+      .msg-status {
-    .msg-status {
+        display: inline-block;
-      display: inline-block;
+        float: right;
-      float: right;
+        @extend %msg-status;
-      @extend %msg-status;
+      }
     }
   }
 }
 //가변에 따른 list-item width값 변경
 .list-item {
-  .item-default {
-    .detail {
-      width: 60%;
-    }
-    .msg-status {
-      width: 38%;
-    }
-  }
   .presence {
     + .item-default {
       width: calc(100% - 20px);

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

@@ -1,6 +1,21 @@
-<div>
+<div class="list-item">
-  <div class="room-name">{{ getRoomName(roomInfo) }}</div>
+  <dl class="item-default">
-  <div>{{ roomInfo.finalEventDate }}</div>
+    <dt>
-  <div>{{ finalEventMessage }}</div>
+      <img class="thumbnail" />
-  <div *ngIf="roomInfo.noReadCnt > 0">noReadCnt : {{ roomInfo.noReadCnt }}</div>
+    </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>
+        </div>
+        <div class="room-msg">{{ finalEventMessage }}</div>
+      </div>
+
+      <div class="date">{{ roomInfo.finalEventDate }}</div>
+    </dd>
+  </dl>
+  <span class="noti">1</span>
 </div>

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

@@ -1,9 +1,11 @@
+@charset 'utf-8';
+@import '../../../../ucap-webmessenger-app/src/assets/scss/global/common.scss';
 .profile {
   white-space: normal;
   text-align: left;
   letter-spacing: 0.01em;
   min-height: 88px;
-  border-bottom: 1px solid;
+  border-bottom: $line-basic;
   padding: 16px;
   font-weight: 400;
   border-radius: 0;
@@ -16,8 +18,7 @@
 
   .profile-name {
     font-size: 16px;
-    white-space: nowrap;
+    @include ellipsis(1)
-    text-overflow: ellipsis;
   }
 
   .profile-last-message {
@@ -44,3 +45,84 @@
     line-height: 20px;
   }
 }
+%list-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: $listH-row2;
+  border-bottom: $line-basic;
+  padding: 20px;
+}
+.item-default {
+  display: flex;
+  width: 100%;
+  .thumbnail {
+    width: $thumbnail-msize;
+    height: $thumbnail-msize;
+    margin-right: 16px;
+    @include border-radius(100px);
+  }
+  .info {
+    position: relative;
+    display: flex;
+    margin: 0;
+    padding: 0;
+    width: calc(100% - 50px);
+    .detail {
+      flex-direction: column;
+      width: calc(100% - 80px);
+      .room-name {
+        display: inline-flex;
+        color: $font-dark;
+        width: 100%;
+        margin-bottom: 2px;
+        .name {
+          font-size: 16px;
+          @include ellipsis(1);
+          font-weight: 600;
+        }
+        .num {
+          font-size: 12px;
+          color: $color-main;
+          flex: none;
+          margin-left: 10px;
+        }
+      }
+      .room-msg {
+        font-size: 12px;
+        color: $font-mid;
+        margin-top: 4px;
+      }
+    }
+    .date {
+      float: right;
+      width: 70px;
+      font-size: 11px;
+      text-align: right;
+      margin-left: 10px;
+      color: $font-mid;
+      @include ellipsis(1);
+    }
+  }
+}
+
+.list-item {
+  @extend %list-item;
+  &:hover {
+    background-color: $bg-list-hover;
+  }
+}
+
+.noti {
+  position: absolute;
+  right: 22px;
+  bottom: 22px;
+  max-width: 60px;
+  padding: 0 6px;
+  font-size: 11px;
+  color: #ffffff;
+  background-color: $color-main;
+  @include ellipsis(1);
+  @include border-radius(100px);
+}