ucap-doc/documents/업무/5월/3째주/angular-prj-profile-01.component.html

<div class="ucap-organization-profile-01-container">
  <!--Profile -->
  <div class="profile-card-box">
    <div class="user-profile-info">
      <ng-container
        *ngIf="isMe; then mineProfile; else otherProfile"
      ></ng-container>
      <ng-template #otherProfile>
        <!--[[ 대화상대 프로필-->
        <!-- 모바일이 온라인일 경우 + mobile-ing -->
        <div class="user-profile-thumb mobile-ing">
          <span class="presence">온라인</span>
          <div class="profileImage">
            <img
              src="https://material.angular.io/assets/img/examples/shiba2.jpg"
              style="width: 122px; height: 122px;"
            />
          </div>
        </div>
        <!--]]-->
      </ng-template>
      <ng-template #mineProfile>
        <!--[[ 내프로필-->
        <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>
        <!--]]-->
      </ng-template>

      <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"
        >
          <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"
        >
          <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>
        -->
    <!-- + 내프로필 -->
    <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>

    <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>