next-ucap-messenger/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.html

<div class="ucap-image-viewer-container">
  <mat-toolbar color="accent" class="ucap-image-viewer-header">
    <mat-icon class="ucap-image-viewer-icon">image</mat-icon>
    <span class="ucap-image-viewer-title">{{ fileInfo.fileName }}</span>
    <span class="ucap-image-viewer-spacer"></span>

    <button
      mat-icon-button
      class="ucap-image-viewer-action"
      matTooltip="이미지 크기 재설정"
      matTooltipPosition="below"
      aria-label=""
    >
      <mat-icon>settings_overscan</mat-icon>
    </button>
    <button
      mat-icon-button
      class="ucap-image-viewer-action"
      matTooltip="축소"
      matTooltipPosition="below"
      aria-label=""
    >
      <mat-icon>zoom_out</mat-icon>
    </button>
    <button
      mat-icon-button
      class="ucap-image-viewer-action"
      matTooltip="확대"
      matTooltipPosition="below"
      aria-label=""
    >
      <mat-icon>zoom_in</mat-icon>
    </button>
    <button
      mat-icon-button
      class="ucap-image-viewer-action"
      matTooltip="다운로드"
      matTooltipPosition="below"
      aria-label=""
      (click)="onClickDownload()"
    >
      <mat-icon>get_app</mat-icon>
    </button>

    <button
      mat-raised-button
      color="primary"
      class="ucap-image-viewer-action"
      (click)="onClickClose()"
    >
      Close
    </button>
  </mat-toolbar>
  <mat-progress-bar
    *ngIf="fileDownloadItem.downloadingProgress$ && !imageSrc"
    mode="determinate"
    [value]="fileDownloadItem.downloadingProgress$ | async"
  ></mat-progress-bar>
  <div class="ucap-image-viewer-body">
    <div
      class="ucap-image-viewer-image-wrapper"
      fxLayout="row"
      fxLayout.xs="column"
      fxFlexFill
      fxLayoutAlign="center center"
    >
      <img *ngIf="imageSrc" [src]="imageSrc" />
    </div>
  </div>
</div>