beteran-backend-app-browser/src/app/modules/admin/board/popup/components/view.component.html

<div class="flex flex-col flex-auto min-w-0">
  <!-- View mode -->

  <!-- Header -->
  <div
    class="relative w-full h-40 sm:h-16 mt-10 x-8 sm:px-12 bg-accent-100 dark:bg-accent-700"
  >
    <!-- Background -->

    <!-- Close button -->
    <div
      class="flex items-center justify-end w-full max-w-3xl mx-auto pt-6"
    ></div>
  </div>
  <!-- Contact -->
  <div
    class="relative flex flex-col flex-auto items-center p-6 pt-0 sm:p-12 sm:pt-0"
  >
    <div class="w-full max-w-3xl">
      <!-- Avatar and actions -->
      <div class="flex flex-auto items-end -mt-16">
        <!-- Actions -->
        <div class="flex items-center ml-auto mb-1">
          <button mat-stroked-button (click)="__modifyPopup()">
            <mat-icon
              class="icon-size-5"
              [svgIcon]="'heroicons_solid:pencil-alt'"
            ></mat-icon>
            <span class="ml-2">수정</span>
          </button>
          <button mat-stroked-button>
            <mat-icon
              class="icon-size-5"
              [svgIcon]="'heroicons_solid:pencil-alt'"
            ></mat-icon>
            <span class="ml-2">삭제</span>
          </button>
        </div>
      </div>
      <div class="flex flex-col mt-4 pt-6 border-t space-y-8">
        <!-- Title -->
        <ng-container *ngIf="popup?.site">
          <div class="flex sm:items-center">
            <!-- <mat-icon [svgIcon]="'heroicons_outline:briefcase'"></mat-icon> -->
            <div class="ml-6 leading-6">사이트선택</div>
            <div class="ml-6 leading-6">{{ popup?.site }}</div>
          </div>
        </ng-container>

        <!-- 팝업사이즈 -->
        <ng-container *ngIf="popup?.widthSize">
          <div class="flex">
            <!-- <mat-icon [svgIcon]="'heroicons_outline:mail'"></mat-icon> -->
            <div class="ml-6 leading-6">팝업사이즈</div>
            <div class="min-w-0 ml-6 space-y-1">
              <div class="flex items-center leading-6">
                <div class="text-md truncate text-secondary">
                  <span class="mx-2">&bull;</span>
                  <span class="font-medium">가로</span>
                </div>
                <div class="text-md truncate text-secondary">
                  <span class="mx-2">&bull;</span>
                  <span class="font-medium">{{ popup?.widthSize }}</span>
                </div>
              </div>
              <div class="flex items-center leading-6">
                <div class="text-md truncate text-secondary">
                  <span class="mx-2">&bull;</span>
                  <span class="font-medium">세로</span>
                </div>
                <div class="text-md truncate text-secondary">
                  <span class="mx-2">&bull;</span>
                  <span class="font-medium">{{ popup?.heightSize }}</span>
                </div>
              </div>
            </div>
          </div>
        </ng-container>

        <!-- 팝업좌표 -->
        <ng-container *ngIf="popup?.topMargin">
          <div class="flex">
            <!-- <mat-icon [svgIcon]="'heroicons_outline:mail'"></mat-icon> -->
            <div class="ml-6 leading-6">팝업좌표</div>
            <div class="min-w-0 ml-6 space-y-1">
              <div class="flex items-center leading-6">
                <div class="text-md truncate text-secondary">
                  <span class="mx-2">&bull;</span>
                  <span class="font-medium">TOP</span>
                </div>
                <div class="text-md truncate text-secondary">
                  <span class="mx-2">&bull;</span>
                  <span class="font-medium">{{ popup?.topMargin }}</span>
                </div>
              </div>
              <div class="flex items-center leading-6">
                <div class="text-md truncate text-secondary">
                  <span class="mx-2">&bull;</span>
                  <span class="font-medium">LEFT</span>
                </div>
                <div class="text-md truncate text-secondary">
                  <span class="mx-2">&bull;</span>
                  <span class="font-medium">{{ popup?.leftMargin }}</span>
                </div>
              </div>
            </div>
          </div>
        </ng-container>

        <!-- Address -->
        <ng-container *ngIf="popup?.title">
          <div class="flex sm:items-center">
            <div class="ml-6 leading-6">팝업제목</div>
            <div class="ml-6 leading-6">{{ popup?.title }}</div>
          </div>
        </ng-container>

        <!-- Notes -->
        <ng-container *ngIf="popup?.content">
          <div class="ml-6 leading-6">팝업내용</div>
          <div class="flex">
            <!-- <mat-icon [svgIcon]="'heroicons_outline:menu-alt-2'"></mat-icon> -->

            <div
              class="max-w-none ml-6 prose prose-sm"
              [innerHTML]="popup?.content"
            ></div>
          </div>
        </ng-container>
        <!-- UseOrNot -->
        <ng-container *ngIf="popup?.useOrNot">
          <div class="flex sm:items-center">
            <!-- <mat-icon [svgIcon]="'heroicons_outline:cake'"></mat-icon> -->
            <div class="ml-6 leading-6">사용여부</div>
            <div class="ml-6 leading-6">
              {{ popup?.useOrNot }}
            </div>
          </div>
        </ng-container>
      </div>
    </div>
  </div>
</div>