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

<div class="message-box container">
  <div>
    search Area.
  </div>
  <div class="container">
    <mat-tab-group
      mat-stretch-tabs
      animationDuration="0ms"
      (selectedIndexChange)="onSelectedIndexChange($event)"
    >
      <mat-tab>
        <ng-template mat-tab-label>
          수신
        </ng-template>

        <div *ngFor="let message of messageList">
          <dl>
            <dt>
              <mat-icon
                *ngIf="
                  !!message.resType && message.resType === ContentType.Image
                "
                >image</mat-icon
              >
              <mat-icon
                *ngIf="
                  !!message.resType &&
                  message.resType === ContentType.AttachFile
                "
                >attach_file</mat-icon
              >
              <ul>
                <li>{{ message.userName }}</li>
                <li>{{ message.title }}</li>
              </ul>
            </dt>
            <dd>
              {{ message.regDate | dateToStringFormat: 'MM:DD' }}
            </dd>
          </dl>
        </div>
      </mat-tab>
      <mat-tab>
        <ng-template mat-tab-label>
          발신
        </ng-template>

        <div *ngFor="let message of messageList">
          <dl>
            <dt>
              <mat-icon
                *ngIf="
                  !!message.resType && message.resType === ContentType.Image
                "
                >image</mat-icon
              >
              <mat-icon
                *ngIf="
                  !!message.resType &&
                  message.resType === ContentType.AttachFile
                "
                >attach_file</mat-icon
              >
              <ul>
                <li>{{ message.userName }}</li>
                <li>{{ message.title }}</li>
              </ul>
            </dt>
            <dd>
              {{ message.regDate | dateToStringFormat: 'MM:DD' }}
            </dd>
          </dl>
        </div>
      </mat-tab>
      <mat-tab>
        <ng-template mat-tab-label>
          예약
        </ng-template>

        <div *ngFor="let message of messageList">
          <dl>
            <dt>
              <mat-icon
                *ngIf="
                  !!message.resType && message.resType === ContentType.Image
                "
                >image</mat-icon
              >
              <mat-icon
                *ngIf="
                  !!message.resType &&
                  message.resType === ContentType.AttachFile
                "
                >attach_file</mat-icon
              >
              <ul>
                <li>{{ message.userName }}</li>
                <li>{{ message.title }}</li>
              </ul>
            </dt>
            <dd>
              {{ message.regDate | dateToStringFormat: 'MM:DD' }}
            </dd>
          </dl>
        </div>
      </mat-tab>
    </mat-tab-group>
  </div>
</div>