ucap-doc/documents/업무/5월/2째주/profile.component.html

<div class="mainProfile">
  <!--Profile -->
  <div class="profile-card-box">
    <!-- + 내프로필 -->
    <ng-container *ngIf="isMe; then isMine; else other"></ng-container>
    <ng-template #isMine>
      <div class="user-profile-info">
        
        <div class="user-profile-thumb">
          <span class="presence">온라인</span>
          <div class="profileImage">
            <img
              src="../../../assets/images/ico/img_nophoto.svg"
              style="width: 122px; height: 122px;"
            />
          </div>
          <div class="btn-profile-ctrl">
            <button mat-mini-fab color="primary" class="mat-mini36-fab">
              <mat-icon class="material-icons-outlined">camera_alt</mat-icon>
            </button>
          </div>
        </div>

        <div class="userInfo">
          <div class="user-n-g">
            <div class="name">{{ userInfo?.name }}</div>
            <div class="grade">{{ userInfo?.grade }}</div>
          </div>
          <div class="deptName">({{ userInfo?.nameEn }})</div>
        </div>
        <div class="btn-profile-add">
          <button
            mat-icon-button
            class="btn-star-add"
            aria-label="Example icon-button with a heart icon"
            *ngIf="!isFavorite"
          >
            <img
              src="../../../assets/images/ico/btn_favorite_w24_s.svg"
              alt=""
            />
          </button>
          <button
            mat-icon-button
            class="btn-star-add"
            aria-label="Example icon-button with a heart icon"
            *ngIf="!isBuddy"
          >
            <img
              src="../../../assets/images/ico/btn_group_add_w24.svg"
              alt=""
            />
          </button>
        </div>
      </div>
      <div class="my-input inputtype">
        <mat-form-field
          class="example-full-width my-in-input"
          appearance="none"
        >
          <mat-label></mat-label>
          <input matInput placeholder="" value="마곡 사이언스 파크 E14동 9층" />
        </mat-form-field>
        <button mat-icon-button aria-label="icon create" class="color-white">
          <mat-icon>create</mat-icon>
        </button>
      </div>
    </ng-template>
    
    <ng-template #other>
      <div class="user-profile-info">
        
        <div class="user-profile-thumb">
          <span class="presence">온라인</span>
          <div class="profileImage">
            <img
              src="../../../assets/images/ico/img_nophoto.svg"
              style="width: 122px; height: 122px;"
            />
          </div>
        </div>
        

        <div class="userInfo">
          <div class="user-n-g">
            <div class="name">{{ userInfo?.name }}</div>
            <div class="grade">{{ userInfo?.grade }}</div>
          </div>
          <div class="deptName">({{ userInfo?.nameEn }})</div>
         
          <div class="nickName">
            <div class="nickName-info">닉네임 미설정</div>
            <button
              mat-icon-button
              aria-label="icon create"
              class="color-white"
            >
              <mat-icon>create</mat-icon>
            </button>
          </div>
          <div class="address-txt">
            마곡 사이언스 파크 E14동 9층
          </div>
        </div>
        <div class="btn-profile-add">
          <button
            mat-icon-button
            class="btn-star-add"
            aria-label="Example icon-button with a heart icon"
            *ngIf="!isFavorite"
          >
            <img
              src="../../../assets/images/ico/btn_favorite_w24_s.svg"
              alt=""
            />
          </button>
          <button
            mat-icon-button
            class="btn-star-add"
            aria-label="Example icon-button with a heart icon"
            *ngIf="!isBuddy"
          >
            <img
              src="../../../assets/images/ico/btn_group_add_w24.svg"
              alt=""
            />
          </button>
        </div>
      </div>
      <div class="btn-partner-set">
        <button mat-icon-button aria-label="chat">
          <img src="../../../assets/images/ico/btn_lise_chat_a24.svg" alt="" />
        </button>
        <button mat-icon-button aria-label="message">
          <img
            src="../../../assets/images/ico/btn_list_message_a24.svg"
            alt=""
          />
        </button>
        <button mat-icon-button aria-label="mobile">
          <img
            src="../../../assets/images/ico/btn_list_mobile_a24.svg"
            alt=""
          />
        </button>
        <button mat-icon-button aria-label="call">
          <img src="../../../assets/images/ico/btn_list_call_a24.svg" alt="" />
        </button>
        <button mat-icon-button aria-label="vc">
          <img src="../../../assets/images/ico/btn_list_vc-a24.svg" alt="" />
        </button>
      </div>
    </ng-template>
    <div class="user-profile-info-list">
      <ul>
        <li>
          <span>{{ 'profile.labels.company' | ucapI18n }}</span>
          {{ userInfo?.companyName }}
        </li>
        <li>
          <span>{{ 'profile.labels.department' | ucapI18n }}</span>
          {{ userInfo?.deptName }}
        </li>
        <li>
          <span>{{ 'profile.labels.email' | ucapI18n }}</span>
          {{ userInfo?.email }}
        </li>
        <li>
          <span>{{ 'profile.labels.linePhoneNumber' | ucapI18n }}</span>
          {{ userInfo?.lineNumber }}
        </li>
        <li>
          <span>{{ 'profile.labels.mobilePhoneNumber' | ucapI18n }}</span>
          {{ userInfo?.hpNumber }}
        </li>
      </ul>
    </div>
  </div>
  <!-- //Profile-->
</div>