<!--체크박스 보여줄때는 <div class="list-item checkbox" matRipple>  클래스에 checkbox만 추가-->
<div class="list-item checkbox" *ngIf="userInfo" matRipple>
  <!--pcOn , pcOut  pcOff , pcOther-->
  <span
    class="presence"
    [ngClass]="getPresence(PresenceType.PC)"
    [matTooltip]="getPresenceMsg()"
    matTooltipPosition="after"
  >
  </span>
  <dl class="item-default">
    <dt>
      <div class="thumbnail-mask">
        <img
          class="thumbnail"
          ucapImage
          [base]="profileImageRoot"
          [path]="userInfo.profileImageFile"
          [default]="'assets/images/img_nophoto_50.png'"
          (click)="onClickOpenProfile($event, userInfo.seq)"
        />
      </div>
      <span
        *ngIf="getPresence(PresenceType.MOBILE) === 'mobileOn'"
        class="text-accent-color marker-mobile-state"
      >
        <mat-icon>phone_android</mat-icon>
      </span>
    </dt>
    <dd class="info">
      <div class="user-info">
        <div class="user">
          <span
            *ngIf="getWorkstatusInfo('text').length > 0"
            class="work-status"
            [ngClass]="getWorkstatusInfo('style')"
            >{{ getWorkstatusInfo('text') }}</span
          >
          <span class="detail">
            <b class="name">{{ userInfo | ucapTranslate: 'name' }}</b>
            <span class="grade">{{ userInfo | ucapTranslate: 'grade' }}</span>
          </span>
        </div>
        <span class="dept">
          {{ userInfo | ucapTranslate: 'deptName' }}
        </span>
      </div>
      <!-- 상태메시지 제외
        <div
        class="msg-status"
        *ngIf="!checkable && userInfo.intro.trim() && !compactable"
      >
        {{ userInfo.intro }}
      </div>
    --></dd>
  </dl>
  <mat-checkbox
    *ngIf="checkable"
    #checkbox
    [checked]="isChecked"
    [disabled]="checkDisabled"
    (change)="onChangeCheck(checkbox.checked, userInfo)"
    (click)="$event.stopPropagation()"
  >
  </mat-checkbox>
</div>
