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

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

@@ -23,10 +23,14 @@
     </dt>
     <dd class="info">
       <div class="detail">
-        <span class="name">
+        <!--morning-off:오전 afternoon-off:오후  day-off:휴가 long-time:장기  leave-of-absence:휴직-->
-          <b>{{ userInfo | ucapTranslate: 'name' }}</b>
+        <div>
-          {{ userInfo | ucapTranslate: 'grade' }}
+          <span class="work-status afternoon-off">오후</span>
-        </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,15 +93,29 @@ $thumbnail-msize: 40px;
     padding: 0;
     width: calc(100% - 50px);
     .detail {
-      flex-flow: column;
+      div {
-      .name {
+        display: flex;
-        font-size: 13px;
+        flex-flow: row;
-        margin-bottom: 2px;
+        .work-status {
-        color: $font-dark;
+          margin-right: 4px;
-        @include ellipsis(1);
+          border-radius: 4px;
-        b {
+          padding: 0 6px;
-          font-size: 16px;
+          color: #ffffff;
-          font-weight: 600;
+          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 {

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