diff --git a/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html b/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html
index 84318d6d..313bc078 100644
--- a/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html
+++ b/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html
@@ -1,16 +1,13 @@
 <!--체크박스 보여줄때는 <div class="list-item checkbox" matRipple>  클래스에 checkbox만 추가-->
 <div class="list-item" matRipple>
   <!--pcOn , pcOut  pcOff , pcOther-->
-  <span class="presence pcOn" *ngIf="userPresence"
-    >{{ userPresence.pcStatus }}
+  <span class="presence" [ngClass]="getPresence(PresenceType.PC)"
+    *ngIf="userPresence && userPresence.pcStatus">{{ userPresence.pcStatus }}
   </span>
   <dl class="item-default">
     <dt>
-      <img
-        class="thumbnail"
-        [src]="profileImageRoot + userInfo.profileImageFile"
-        onerror="this.src='assets/images/img_nophoto_50.png'"
-      />
+      <img class="thumbnail" [src]="profileImageRoot + userInfo.profileImageFile"
+        onerror="this.src='assets/images/img_nophoto_50.png'" />
     </dt>
     <dd class="info">
       <div class="detail">
@@ -22,10 +19,7 @@
           {{ userInfo.deptName }}
         </span>
       </div>
-      <div
-        class="msg-status"
-        *ngIf="!checkable && userInfo.intro.trim() && !compactable"
-      >
+      <div class="msg-status" *ngIf="!checkable && userInfo.intro.trim() && !compactable">
         {{ userInfo.intro }}
       </div>
     </dd>
diff --git a/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.ts b/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.ts
index 2c33b8cd..dcca8698 100644
--- a/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.ts
+++ b/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.ts
@@ -13,6 +13,7 @@ import { NGXLogger } from 'ngx-logger';
 import { tap } from 'rxjs/operators';
 import { SessionStorageService } from '@ucap-webmessenger/web-storage';
 import { KEY_VER_INFO, VerInfo2 } from '@app/types/ver-info.type';
+import { StatusCode } from '@ucap-webmessenger/core';
 
 @Component({
   selector: 'ucap-profile-user-list-item',
@@ -36,6 +37,10 @@ export class UserListItemComponent implements OnInit, OnDestroy {
 
   userPresence: StatusBulkInfo | StatusInfo;
 
+  get PresenceType() {
+    return PresenceType;
+  }
+
   // private profileImageRootSubscription: Subscription;
 
   constructor(
@@ -63,4 +68,42 @@ export class UserListItemComponent implements OnInit, OnDestroy {
     //   this.profileImageRootSubscription.unsubscribe();
     // }
   }
+
+  getPresence(type: string): string {
+    let status: string;
+    let rtnClass = '';
+    switch (type) {
+      case 'pc':
+        status = this.userPresence.pcStatus;
+        break;
+    }
+
+    if (!!status) {
+      switch (status) {
+        case StatusCode.OnLine:
+          rtnClass = type + 'On';
+          break;
+        case StatusCode.Away:
+          rtnClass = type + 'Out';
+          break;
+        case StatusCode.Busy:
+          rtnClass = type + 'Other';
+          break;
+        default:
+          rtnClass = type + 'Off';
+          break;
+      }
+    }
+
+    return rtnClass;
+  }
+}
+
+export enum PresenceType {
+  PC = 'pc',
+  MOBILE = 'mobile',
+  CONFERENCE = 'conference',
+  MOBILE_CONFERENCE = 'mobileConference',
+  PHONE = 'phone',
+  IMESSENER = 'imessenger'
 }