next-ucap-messenger/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.html

<div fxLayout="column" class="rightDrawer-filebox">
  <div class="rightDrawer-tab">
    <mat-tab-group (selectedIndexChange)="onSelectedIndexChange($event)">
      <mat-tab label="Receive"></mat-tab>
      <mat-tab label="Send"></mat-tab>
    </mat-tab-group>
  </div>
  <div fxFlex="1 1 200px" class="select-filebox bg-accent-brightest">
    <ng-container *ngIf="!selectedFile">
      <div class="empty-msg">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="36"
          height="36"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="1.5"
          stroke-linecap="butt"
          stroke-linejoin="round"
        >
          <path
            d="M13 2H6a2 2 0 0 0-2 2v16c0 1.1.9 2 2 2h12a2 2 0 0 0 2-2V9l-7-7z"
          />
          <path d="M13 3v6h6" />
        </svg>
        <span>Select File.</span>
      </div>
    </ng-container>
    <ng-container *ngIf="selectedFile">
      <div class="select-flie">
        <div
          [ngClass]="[
            'mime-icon',
            'light',
            'ico-' + getExtention(selectedFile.info.name)
          ]"
        >
          <div class="ico"></div>
        </div>
        <ul>
          <li class="name">{{ selectedFile.info.name }}</li>
          <li>size : {{ selectedFile.info.size | ucapBytes }}</li>
          <li>
            date :
            {{ selectedFile.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }}
          </li>
        </ul>
      </div>
      <div class="select-file-option">
        <span matTooltip="다운로드" class="text-accent-darkest">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="1.5"
            stroke-linecap="butt"
            stroke-linejoin="round"
          >
            <path
              d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"
            />
          </svg>
        </span>
        <span matTooltip="나에게전달" class="text-accent-darkest">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="1.5"
            stroke-linecap="butt"
            stroke-linejoin="round"
          >
            <path
              d="M5.52 19c.64-2.2 1.84-3 3.22-3h6.52c1.38 0 2.58.8 3.22 3"
            />
            <circle cx="12" cy="10" r="3" />
            <circle cx="12" cy="12" r="10" />
          </svg>
        </span>
        <span matTooltip="파일전달" class="text-accent-darkest">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="1.5"
            stroke-linecap="butt"
            stroke-linejoin="round"
          >
            <g fill="none" fill-rule="evenodd">
              <path
                d="M18 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8c0-1.1.9-2 2-2h5M15 3h6v6M10 14L20.2 3.8"
              />
            </g>
          </svg>
        </span>
        <span matTooltip="파일삭제" class="text-accent-darkest">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="1.5"
            stroke-linecap="butt"
            stroke-linejoin="round"
          >
            <path d="M20 11.08V8l-6-6H6a2 2 0 0 0-2 2v16c0 1.1.9 2 2 2h6" />
            <path d="M14 3v5h5M15.88 20.12l4.24-4.24M15.88 15.88l4.24 4.24" />
          </svg>
        </span>
      </div>
    </ng-container>
  </div>
  <div fxFlex="0 0 auto" class="table-box">
    <table mat-table [dataSource]="dataSource" matSort>
      <ng-container matColumnDef="check">
        <th mat-header-cell *matHeaderCellDef>
          <mat-checkbox
            #checkboxAll
            [checked]="getCheckAllUser()"
            (change)="onCheckAllkUser(checkboxAll.checked)"
            (click)="$event.stopPropagation()"
          >
          </mat-checkbox>
        </th>
        <td mat-cell *matCellDef="let element">
          <mat-checkbox
            #checkbox
            [checked]="getCheckUser(element)"
            (change)="onCheckUser(checkbox.checked, element)"
            (click)="$event.stopPropagation()"
          >
          </mat-checkbox>
        </td>
      </ng-container>
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef mat-sort-header class="infos">
          Name
        </th>
        <td mat-cell *matCellDef="let element" class="file-info">
          <div class="file-name">
            {{ element.info.name }}
          </div>
          <div class="download-period text-accent-color">
            <!--{{ element.info.size | ucapBytes }}-->
            {{ element.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }} ~
            2020.01.23
          </div>
        </td>
      </ng-container>
      <ng-container matColumnDef="sendDate" class="date">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>sendDate</th>
        <td mat-cell *matCellDef="let element">
          <!--{{ element.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }}-->
          {{ element.info.size | ucapBytes }}
        </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr
        mat-row
        *matRowDef="let row; columns: displayedColumns"
        (click)="onClickRow(row)"
      ></tr>
    </table>
  </div>
  <div class="footer-fix">
    <mat-paginator
      [pageSize]="10"
      [pageSizeOptions]="[5, 10, 20]"
      showFirstLastButtons
    ></mat-paginator>

    <div
      fxFlex="1 1 50px"
      fxLayout="row"
      fxLayoutAlign="center center"
      class="btn-box"
    >
      <button
        mat-flat-button
        [disabled]="selectedFileList.length > 0 ? 'false' : 'true'"
        class="mat-primary"
      >
        Download All
      </button>
      <button mat-flat-button class="mat-primary">
        Open Folder
      </button>
    </div>
  </div>
</div>