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

<!--체크박스 보여줄때는 <div class="list-item checkbox" matRipple>  클래스에 checkbox만 추가-->
<div class="list-item checkbox" matRipple>
  <!--presence-pcOn , presence-pcOut  presence-pcOff , presence-pcOther-->
  <span class="presence-pcOn" *ngIf="presence">{{ presence.pcStatus }} </span>
  <div class="item-default">
    <img
      class="thumbnail"
      src="{{ profileImageRoot + userInfo.profileImageFile }}"
    />
    <ul class="info">
      <li class="name">{{ userInfo.name }} {{ userInfo.grade }}</li>
      <li class="dept">
        {{ userInfo.deptName }}
        가나다라마바사아자차카파하가나다라마바사아자차카파하하가나다
      </li>
      <li class="record">{{ userInfo.intro }}</li>
    </ul>
  </div>
  <mat-checkbox *ngIf="checkable"></mat-checkbox>
</div>