그룹리스트, 조직도 리스트- 휴가자 정보제공

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

@@ -23,10 +23,14 @@
     </dt>
     <dd class="info">
       <div class="detail">
+        <!--morning-off:오전 afternoon-off:오후  day-off:휴가 long-time:장기  leave-of-absence:휴직-->
+        <div>
+          <span class="work-status afternoon-off">오후</span>
           <span class="name">
             <b>{{ userInfo | ucapTranslate: 'name' }}</b>
             {{ userInfo | ucapTranslate: 'grade' }}
           </span>
+        </div>
         <span class="dept">
           {{ userInfo | ucapTranslate: 'deptName' }}
         </span>

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

@@ -93,17 +93,31 @@ $thumbnail-msize: 40px;
     padding: 0;
     width: calc(100% - 50px);
     .detail {
-      flex-flow: column;
+      div {
+        display: flex;
+        flex-flow: row;
+        .work-status {
+          margin-right: 4px;
+          border-radius: 4px;
+          padding: 0 6px;
+          color: #ffffff;
+          font-size: 12px;
+          width: 40px;
+          justify-items: center;
+          height: 100%;
+        }
         .name {
           font-size: 13px;
           margin-bottom: 2px;
           color: $font-dark;
+          width: calc(100% - 40px);
           @include ellipsis(1);
           b {
             font-size: 16px;
             font-weight: 600;
           }
         }
+      }
       .dept {
         font-size: 12px;
         color: $font-mid;

projects/ucap-webmessenger-ui/src/assets/scss/partials/_presence.scss

@@ -23,3 +23,21 @@
     background-color: #f0c10a;
   }
 }
+
+.work-status {
+  &.morning-off {
+    background-color: #11845d;
+  }
+  &.afternoon-off {
+    background-color: #875acb;
+  }
+  &.day-off {
+    background-color: #2b98eb;
+  }
+  &.long-time {
+    background-color: #c72f20;
+  }
+  &.leave-of-absence {
+    background-color: #e7853e;
+  }
+}