ucap-doc/documents/업무/5월/3째주/Untitled-2.html

<div class="ucap-organization-profile-01-container">
  <!--Profile -->
  <div class="profile-card-box">
    <div class="user-profile-info">
      <div class="user-profile-thumb">
        <span
          class="presence"
          [ngClass]="getPresence(PresenceType.PC)"
          [matTooltip]="getPresenceMsg()"
          matTooltipPosition="after"
        ></span>
        <div class="profileImage">
          <img
            src="../../../assets/images/ico/img_nophoto.svg"
            style="width: 122px; height: 122px;"
          />
        </div>
        <div
          *ngIf="
            !!userInfo &&
            !!loginRes &&
            userInfo.seq === String(loginRes.userInfo?.seq)
          "
          class="btn-profile-ctrl"
        >
          <button
            mat-mini-fab
            color="primary"
            class="mat-mini36-fab"
            (click)="profileImageFileInput.click()"
          >
            <mat-icon class="material-icons-outlined">camera_alt</mat-icon>
          </button>
          <input
            type="file"
            #profileImageFileInput
            style="display: none;"
            (change)="onChangeFileInput()"
          />
        </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>

        <ng-container
          *ngIf="
            !!userInfo &&
            !!loginRes &&
            userInfo.seq !== String(loginRes.userInfo?.seq)
          "
        >
          <div class="nickName">
            <div class="nickName-info">
              <mat-form-field
                class="example-full-width my-in-input"
                appearance="none"
              >
                <mat-label></mat-label>
                <input
                  #nicknameInput
                  matInput
                  placeholder="닉네임 미설정"
                  value=""
                />
              </mat-form-field>
            </div>
            <button
              mat-icon-button
              aria-label="icon create"
              class="color-white"
              (click)="onProfileIntro(nicknameInput.value)"
            >
              <mat-icon>create</mat-icon>
            </button>
          </div>
        </ng-container>
        <ng-container
          *ngIf="
            !!userInfo &&
              !!loginRes &&
              userInfo.seq === String(loginRes.userInfo?.seq);
            then mineProfileIntro;
            else otherProfileIntro
          "
        >
        </ng-container>
        <ng-template #otherProfileIntro>
          <div class="address-txt">
            {{ userInfo?.intro }}
          </div>
        </ng-template>
        <ng-template #mineProfileIntro>
          <div class="my-input inputtype">
            <mat-form-field
              class="example-full-width my-in-input"
              appearance="none"
            >
              <mat-label></mat-label>
              <input
                #myProfileIntro
                matInput
                placeholder=""
                value="{{ userInfo?.intro }}"
              />
            </mat-form-field>
            <button
              mat-icon-button
              aria-label="icon create"
              class="color-white"
              (click)="onProfileIntro(myProfileIntro.value)"
            >
              <mat-icon>create</mat-icon>
            </button>
          </div>
        </ng-template>
      </div>
      <div
        *ngIf="
          !!userInfo &&
          !!loginRes &&
          userInfo.seq !== String(loginRes.userInfo?.seq)
        "
        class="btn-profile-add"
      >
        <button
          mat-icon-button
          class="btn-star-add"
          [ngClass]="[isFavorite ? 'on' : '']"
          aria-label="Example icon-button with a heart icon"
          *ngIf="!isFavorite"
          (click)="onToggleFavorit()"
        >
          <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
        *ngIf="
          !!userInfo &&
          !!loginRes &&
          userInfo.seq !== String(loginRes.userInfo?.seq)
        "
        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>
    <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>
</div>