From de413282b3e64144eb1ef8d042fc481dccd85289 Mon Sep 17 00:00:00 2001
From: Park Byung Eun <geekdev@naver.com>
Date: Wed, 27 Jul 2022 07:03:56 +0000
Subject: [PATCH] =?UTF-8?q?=ED=8C=9D=EC=97=85=EC=B0=BD=20=ED=85=8C?=
 =?UTF-8?q?=EC=9D=B4=EB=B8=94=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20=ED=8C=8C?=
 =?UTF-8?q?=EC=9D=BC=20=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/mock-api/apps/board/popup/data.ts     |   2 +-
 .../components/registration.component.html    |   2 -
 .../components/registration.component.ts      | 183 ---------
 .../components/view.component.html            |   4 -
 .../components/view.component.ts              | 183 ---------
 .../popup/components/edit.component.html      |   2 -
 .../popup/components/list.component.html      | 373 ++++++------------
 .../board/popup/components/list.component.ts  |  29 +-
 .../popup/components/redit.component.html     |  83 ++++
 .../{edit.component.ts => redit.component.ts} |  77 ++--
 .../components/registration.component.html    |   2 -
 .../components/registration.component.ts      | 183 ---------
 .../popup/components/view.component.html      |   2 -
 .../board/popup/components/view.component.ts  | 183 ---------
 .../modules/admin/board/popup/models/popup.ts |   4 +-
 .../modules/admin/board/popup/popup.module.ts |   8 +-
 16 files changed, 274 insertions(+), 1046 deletions(-)
 delete mode 100644 src/app/modules/admin/board/customer-template/components/registration.component.html
 delete mode 100644 src/app/modules/admin/board/customer-template/components/registration.component.ts
 delete mode 100644 src/app/modules/admin/board/customer-template/components/view.component.html
 delete mode 100644 src/app/modules/admin/board/customer-template/components/view.component.ts
 delete mode 100644 src/app/modules/admin/board/popup/components/edit.component.html
 create mode 100644 src/app/modules/admin/board/popup/components/redit.component.html
 rename src/app/modules/admin/board/popup/components/{edit.component.ts => redit.component.ts} (70%)
 delete mode 100644 src/app/modules/admin/board/popup/components/registration.component.html
 delete mode 100644 src/app/modules/admin/board/popup/components/registration.component.ts
 delete mode 100644 src/app/modules/admin/board/popup/components/view.component.html
 delete mode 100644 src/app/modules/admin/board/popup/components/view.component.ts

diff --git a/src/app/mock-api/apps/board/popup/data.ts b/src/app/mock-api/apps/board/popup/data.ts
index 9d88864..05cfd91 100644
--- a/src/app/mock-api/apps/board/popup/data.ts
+++ b/src/app/mock-api/apps/board/popup/data.ts
@@ -5,7 +5,7 @@ export const popups = [
     index: 10,
     title: '악성배팅 제제 안내',
     widthSize: 500,
-    verticalSize: 830,
+    heightSize: 830,
     topMargin: 100,
     leftMargin: 100,
     site: 'all',
diff --git a/src/app/modules/admin/board/customer-template/components/registration.component.html b/src/app/modules/admin/board/customer-template/components/registration.component.html
deleted file mode 100644
index 49fa156..0000000
--- a/src/app/modules/admin/board/customer-template/components/registration.component.html
+++ /dev/null
@@ -1,2 +0,0 @@
-<!-- Title -->
-<div class="text-4xl font-extrabold tracking-tight">고객센터 템플릿 등록</div>
diff --git a/src/app/modules/admin/board/customer-template/components/registration.component.ts b/src/app/modules/admin/board/customer-template/components/registration.component.ts
deleted file mode 100644
index 645b6d8..0000000
--- a/src/app/modules/admin/board/customer-template/components/registration.component.ts
+++ /dev/null
@@ -1,183 +0,0 @@
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  OnDestroy,
-  OnInit,
-  ViewChild,
-  ViewEncapsulation,
-} from '@angular/core';
-import {
-  FormBuilder,
-  FormControl,
-  FormGroup,
-  Validators,
-} from '@angular/forms';
-import { MatCheckboxChange } from '@angular/material/checkbox';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
-import {
-  debounceTime,
-  map,
-  merge,
-  Observable,
-  Subject,
-  switchMap,
-  takeUntil,
-} from 'rxjs';
-import { fuseAnimations } from '@fuse/animations';
-import { FuseConfirmationService } from '@fuse/services/confirmation';
-
-import { User } from 'app/modules/admin/member/user/models/user';
-import { UserService } from 'app/modules/admin/member/user/services/user.service';
-
-@Component({
-  selector: 'customer-template-registration',
-  templateUrl: './registration.component.html',
-  styles: [
-    /* language=SCSS */
-    `
-      .inventory-grid {
-        grid-template-columns: 48px auto 40px;
-
-        @screen sm {
-          grid-template-columns: 48px auto 112px 72px;
-        }
-
-        @screen md {
-          grid-template-columns: 48px 112px auto 112px 72px;
-        }
-
-        @screen lg {
-          grid-template-columns: 48px 112px auto 112px 96px 96px 72px;
-        }
-      }
-    `,
-  ],
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  animations: fuseAnimations,
-})
-export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
-  @ViewChild(MatPaginator) private _paginator!: MatPaginator;
-  @ViewChild(MatSort) private _sort!: MatSort;
-
-  isLoading = false;
-  searchInputControl = new FormControl();
-  selectedProductForm!: FormGroup;
-  selectedUser?: User;
-
-  private _unsubscribeAll: Subject<any> = new Subject<any>();
-
-  /**
-   * Constructor
-   */
-  constructor(
-    private _changeDetectorRef: ChangeDetectorRef,
-    private _fuseConfirmationService: FuseConfirmationService,
-    private _formBuilder: FormBuilder,
-    private _userService: UserService
-  ) {}
-
-  // -----------------------------------------------------------------------------------------------------
-  // @ Lifecycle hooks
-  // -----------------------------------------------------------------------------------------------------
-
-  /**
-   * On init
-   */
-  ngOnInit(): void {
-    this.selectedProductForm = this._formBuilder.group({
-      id: [''],
-      signinId: [{ value: '', disabled: true }],
-      signinPw: [{ value: '' }],
-      exchangePw: [''],
-      description: [''],
-      tags: [[]],
-      nickname: [{ value: '', disabled: true }],
-      ownCash: [''],
-      phoneNumber: [''],
-      level: [''],
-      status: [''],
-      isExcahngeMoney: [''],
-      bankname: [''],
-      accountNumber: [''],
-      accountHolder: [''],
-      comp: [''],
-      coupon: [''],
-      recommender: [{ value: '', disabled: true }],
-      changeSite: [''],
-      recommendCount: [''],
-      hodingGameMoney: [{ value: '0', disabled: true }],
-      memo: [''],
-      bacaraRate: [],
-      rulletRate: [],
-      dragonRate: [],
-      etcRate: [],
-      slotRate: [],
-      casinoRusingRate: [],
-      slotRusingRate: [],
-    });
-
-    // Get the User
-    this._userService.user$
-      .pipe(takeUntil(this._unsubscribeAll))
-      .subscribe((user: User | undefined) => {
-        if (!user) {
-          return;
-        }
-        this.selectedUser = user;
-
-        this.selectedProductForm.patchValue(user);
-        // Mark for check
-        this._changeDetectorRef.markForCheck();
-      });
-
-    /* this.user$ = this._userService.user$; */
-  }
-
-  /**
-   * After view init
-   */
-  ngAfterViewInit(): void {}
-
-  /**
-   * On destroy
-   */
-  ngOnDestroy(): void {
-    // Unsubscribe from all subscriptions
-    this._unsubscribeAll.next(null);
-    this._unsubscribeAll.complete();
-  }
-
-  // -----------------------------------------------------------------------------------------------------
-  // @ Public methods
-  // -----------------------------------------------------------------------------------------------------
-
-  // -----------------------------------------------------------------------------------------------------
-  // @ Private methods
-  // -----------------------------------------------------------------------------------------------------
-
-  /**
-   * Create product
-   */
-  __createProduct(): void {}
-
-  /**
-   * Toggle product details
-   *
-   * @param productId
-   */
-  __toggleDetails(productId: string): void {}
-
-  /**
-   * Track by function for ngFor loops
-   *
-   * @param index
-   * @param item
-   */
-  __trackByFn(index: number, item: any): any {
-    return item.id || index;
-  }
-}
diff --git a/src/app/modules/admin/board/customer-template/components/view.component.html b/src/app/modules/admin/board/customer-template/components/view.component.html
deleted file mode 100644
index 17da861..0000000
--- a/src/app/modules/admin/board/customer-template/components/view.component.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<!-- Title -->
-<div class="text-4xl font-extrabold tracking-tight">
-  고객센터템플릿-상세페이지
-</div>
diff --git a/src/app/modules/admin/board/customer-template/components/view.component.ts b/src/app/modules/admin/board/customer-template/components/view.component.ts
deleted file mode 100644
index c5563d4..0000000
--- a/src/app/modules/admin/board/customer-template/components/view.component.ts
+++ /dev/null
@@ -1,183 +0,0 @@
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  OnDestroy,
-  OnInit,
-  ViewChild,
-  ViewEncapsulation,
-} from '@angular/core';
-import {
-  FormBuilder,
-  FormControl,
-  FormGroup,
-  Validators,
-} from '@angular/forms';
-import { MatCheckboxChange } from '@angular/material/checkbox';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
-import {
-  debounceTime,
-  map,
-  merge,
-  Observable,
-  Subject,
-  switchMap,
-  takeUntil,
-} from 'rxjs';
-import { fuseAnimations } from '@fuse/animations';
-import { FuseConfirmationService } from '@fuse/services/confirmation';
-
-import { User } from 'app/modules/admin/member/user/models/user';
-import { UserService } from 'app/modules/admin/member/user/services/user.service';
-
-@Component({
-  selector: 'customer-template-view',
-  templateUrl: './view.component.html',
-  styles: [
-    /* language=SCSS */
-    `
-      .inventory-grid {
-        grid-template-columns: 48px auto 40px;
-
-        @screen sm {
-          grid-template-columns: 48px auto 112px 72px;
-        }
-
-        @screen md {
-          grid-template-columns: 48px 112px auto 112px 72px;
-        }
-
-        @screen lg {
-          grid-template-columns: 48px 112px auto 112px 96px 96px 72px;
-        }
-      }
-    `,
-  ],
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  animations: fuseAnimations,
-})
-export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
-  @ViewChild(MatPaginator) private _paginator!: MatPaginator;
-  @ViewChild(MatSort) private _sort!: MatSort;
-
-  isLoading = false;
-  searchInputControl = new FormControl();
-  selectedProductForm!: FormGroup;
-  selectedUser?: User;
-
-  private _unsubscribeAll: Subject<any> = new Subject<any>();
-
-  /**
-   * Constructor
-   */
-  constructor(
-    private _changeDetectorRef: ChangeDetectorRef,
-    private _fuseConfirmationService: FuseConfirmationService,
-    private _formBuilder: FormBuilder,
-    private _userService: UserService
-  ) {}
-
-  // -----------------------------------------------------------------------------------------------------
-  // @ Lifecycle hooks
-  // -----------------------------------------------------------------------------------------------------
-
-  /**
-   * On init
-   */
-  ngOnInit(): void {
-    this.selectedProductForm = this._formBuilder.group({
-      id: [''],
-      signinId: [{ value: '', disabled: true }],
-      signinPw: [{ value: '' }],
-      exchangePw: [''],
-      description: [''],
-      tags: [[]],
-      nickname: [{ value: '', disabled: true }],
-      ownCash: [''],
-      phoneNumber: [''],
-      level: [''],
-      status: [''],
-      isExcahngeMoney: [''],
-      bankname: [''],
-      accountNumber: [''],
-      accountHolder: [''],
-      comp: [''],
-      coupon: [''],
-      recommender: [{ value: '', disabled: true }],
-      changeSite: [''],
-      recommendCount: [''],
-      hodingGameMoney: [{ value: '0', disabled: true }],
-      memo: [''],
-      bacaraRate: [],
-      rulletRate: [],
-      dragonRate: [],
-      etcRate: [],
-      slotRate: [],
-      casinoRusingRate: [],
-      slotRusingRate: [],
-    });
-
-    // Get the User
-    this._userService.user$
-      .pipe(takeUntil(this._unsubscribeAll))
-      .subscribe((user: User | undefined) => {
-        if (!user) {
-          return;
-        }
-        this.selectedUser = user;
-
-        this.selectedProductForm.patchValue(user);
-        // Mark for check
-        this._changeDetectorRef.markForCheck();
-      });
-
-    /* this.user$ = this._userService.user$; */
-  }
-
-  /**
-   * After view init
-   */
-  ngAfterViewInit(): void {}
-
-  /**
-   * On destroy
-   */
-  ngOnDestroy(): void {
-    // Unsubscribe from all subscriptions
-    this._unsubscribeAll.next(null);
-    this._unsubscribeAll.complete();
-  }
-
-  // -----------------------------------------------------------------------------------------------------
-  // @ Public methods
-  // -----------------------------------------------------------------------------------------------------
-
-  // -----------------------------------------------------------------------------------------------------
-  // @ Private methods
-  // -----------------------------------------------------------------------------------------------------
-
-  /**
-   * Create product
-   */
-  __createProduct(): void {}
-
-  /**
-   * Toggle product details
-   *
-   * @param productId
-   */
-  __toggleDetails(productId: string): void {}
-
-  /**
-   * Track by function for ngFor loops
-   *
-   * @param index
-   * @param item
-   */
-  __trackByFn(index: number, item: any): any {
-    return item.id || index;
-  }
-}
diff --git a/src/app/modules/admin/board/popup/components/edit.component.html b/src/app/modules/admin/board/popup/components/edit.component.html
deleted file mode 100644
index 2f11788..0000000
--- a/src/app/modules/admin/board/popup/components/edit.component.html
+++ /dev/null
@@ -1,2 +0,0 @@
-<!-- Title -->
-<div class="text-4xl font-extrabold tracking-tight">팝업 수정</div>
diff --git a/src/app/modules/admin/board/popup/components/list.component.html b/src/app/modules/admin/board/popup/components/list.component.html
index 8787ded..d300d76 100644
--- a/src/app/modules/admin/board/popup/components/list.component.html
+++ b/src/app/modules/admin/board/popup/components/list.component.html
@@ -1,249 +1,136 @@
-<div
-  class="sm:absolute sm:inset-0 flex flex-col flex-auto min-w-0 sm:overflow-hidden bg-card dark:bg-transparent"
->
-  <!-- Header -->
-  <div
-    class="relative flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between py-8 px-6 md:px-8 border-b"
-  >
-    <!-- Loader -->
-    <div class="absolute inset-x-0 bottom-0" *ngIf="isLoading">
-      <mat-progress-bar [mode]="'indeterminate'"></mat-progress-bar>
-    </div>
-    <!-- Title -->
-    <div class="text-4xl font-extrabold tracking-tight">팝업</div>
-    <!-- Actions -->
-    <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
-      <!-- Memo -->
-      <!-- <mat-form-field>
-        <ng-container *ngIf="popups$ | async as popups">
-          <ng-container
-            *ngFor="let popup of popups; trackBy: __trackByFn"
-          >
-            <div
-              class="inventory-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
-            >
-              <fieldset>
-                총 파트너수:{{ popup.totalPartnerCount }} 총 보유머니:{{
-                  popup.totalHoldingMoney
-                }}
-                총 콤프:{{ popup.totalComp }} 총 합계:{{
-                  popup.total
-                }}
-              </fieldset>
-            </div>
-          </ng-container>
-        </ng-container>
-      </mat-form-field> -->
-
-      <!-- SelectBox -->
-      <!-- <mat-form-field>
-        <mat-select placeholder="리스트수">
-          <mat-option value="40">40</mat-option>
-          <mat-option value="60">60</mat-option>
-          <mat-option value="80">80</mat-option>
-          <mat-option value="100">100</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="레벨">
-          <mat-option value="level1">LV.1</mat-option>
-          <mat-option value="level2">LV.2</mat-option>
-          <mat-option value="level3">LV.3</mat-option>
-          <mat-option value="level4">LV.4</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="상태">
-          <mat-option value="">정상</mat-option>
-          <mat-option value="">대기</mat-option>
-          <mat-option value="">탈퇴</mat-option>
-          <mat-option value="">휴면</mat-option>
-          <mat-option value="">블랙</mat-option>
-          <mat-option value="">정지</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="제한">
-          <mat-option value="">카지노제한</mat-option>
-          <mat-option value="">슬롯제한</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="입금">
-          <mat-option value="">계좌입금</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="내용">
-          <mat-option value="">카지노콤프</mat-option>
-          <mat-option value="">슬롯콤프</mat-option>
-          <mat-option value="">배팅콤프</mat-option>
-          <mat-option value="">첫충콤프</mat-option>
-        </mat-select>
-      </mat-form-field> -->
-      <!-- <mat-form-field>
-        <mat-select placeholder="입금">
-          <mat-option value="">계좌입금</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="아이디">
-          <mat-option value="">아이디</mat-option>
-          <mat-option value="">닉네임</mat-option>
-          <mat-option value="">이름</mat-option>
-          <mat-option value="">사이트</mat-option>
-          <mat-option value="">파트너수동지급</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="가입일 정렬">
-          <mat-option value="">가입일 정렬</mat-option>
-          <mat-option value="">아이디 정렬</mat-option>
-          <mat-option value="">닉네임 정렬</mat-option>
-          <mat-option value="">캐쉬 정렬</mat-option>
-          <mat-option value="">콤프 정렬</mat-option>
-          <mat-option value="">쿠폰 정렬</mat-option>
-          <mat-option value="">입금 정렬</mat-option>
-          <mat-option value="">출금 정렬</mat-option>
-          <mat-option value="">차익 정렬</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="내림차순">
-          <mat-option value="">내림차순</mat-option>
-          <mat-option value="">오름차순</mat-option>
-        </mat-select>
-      </mat-form-field> -->
-      <!-- Search -->
-      <!-- <mat-form-field
-        class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded min-w-64"
-      >
-        <mat-icon
-          class="icon-size-5"
-          matPrefix
-          [svgIcon]="'heroicons_solid:search'"
-        ></mat-icon>
-        <input
-          matInput
-          [formControl]="searchInputControl"
-          [autocomplete]="'off'"
-          [placeholder]="'Search'"
-        />
-      </mat-form-field> -->
-      <!-- Add user button -->
-      <!-- <button
-        class="ml-4"
-        mat-flat-button
-        [color]="'primary'"
-        (click)="__createProduct()"
-      > -->
-      <!-- <mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon> -->
-      <!-- <span class="ml-2 mr-1">검색하기</span>
-      </button>
-      <button>엑셀저장</button>
-      <button>카지노머니확인</button>
-    </div>
-  </div> -->
-
-      <!-- Main -->
-      <div class="flex flex-auto overflow-hidden">
-        <!-- Products list -->
+<div class="flex flex-col flex-auto min-w-0">
+  <div class="flex-auto border-t -mt-px pt-4 sm:pt-6">
+    <div class="w-full max-w-screen-xl mx-auto">
+      <div class="grid grid-cols-1 sm:grid-cols-6 gap-6 w-full min-w-0">
+        <!-- Budget distribution -->
         <div
-          class="flex flex-col flex-auto sm:mb-18 overflow-hidden sm:overflow-y-auto"
+          class="sm:col-span-6 flex flex-col flex-auto p-6 bg-card shadow rounded-2xl overflow-hidden"
         >
-          <ng-container *ngIf="popups$ | async as popups">
-            <ng-container *ngIf="popups.length > 0; else noPopup">
-              <div class="grid">
-                <!-- Header -->
-                <div
-                  class="inventory-grid z-10 sticky top-0 grid gap-4 py-4 px-6 md:px-8 shadow text-md font-semibold text-secondary bg-gray-50 dark:bg-black dark:bg-opacity-5"
-                  matSort
-                  matSortDisableClear
-                >
-                  <div class="hidden sm:block">번호</div>
-                  <div class="hidden sm:block">제목</div>
-                  <div class="hidden sm:block">가로</div>
-                  <div class="hidden sm:block">세로</div>
-                  <div class="hidden sm:block">위에서부터</div>
-                  <div class="hidden sm:block">왼쪽에서부터</div>
-                  <div class="hidden sm:block">사이트</div>
-                  <div class="hidden sm:block">사용여부</div>
-                  <div class="hidden sm:block">비고</div>
-                </div>
-                <!-- Rows -->
-                <ng-container *ngIf="popups$ | async as popups">
-                  <ng-container
-                    *ngFor="let popup of popups; trackBy: __trackByFn"
-                  >
-                    <div
-                      class="inventory-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
-                    >
-                      <!-- 번호 -->
-                      <div class="hidden sm:block truncate">
-                        {{ popup.index }}
-                      </div>
-                      <!-- 제목 -->
-                      <div class="hidden sm:block truncate">
-                        {{ popup.title }}
-                      </div>
-                      <!-- 가로 -->
-                      <div class="hidden sm:block truncate">
-                        {{ popup.widthSize }}
-                      </div>
-                      <!-- 세로 -->
-                      <div class="hidden sm:block truncate">
-                        {{ popup.verticalSize }}
-                      </div>
-                      <!-- 위에서부터 -->
-                      <div class="hidden sm:block truncate">
-                        {{ popup.topMargin }}
-                      </div>
-                      <!-- 왼쪽에서부터 -->
-                      <div class="hidden sm:block truncate">
-                        {{ popup.leftMargin }}
-                      </div>
-                      <!-- 사이트 -->
-                      <div class="hidden sm:block truncate">
-                        {{ popup.Site }}
-                      </div>
-                      <!-- 사용여부 -->
-                      <div class="hidden sm:block truncate">
-                        {{ popup.useOrNot }}
-                      </div>
-                      <!-- 비고 -->
-                      <div class="hidden sm:block truncate">
-                        <button mat-flat-button [color]="'primary'">
-                          수정
-                        </button>
-                        <button mat-flat-button [color]="'warn'">삭제</button>
-                      </div>
-                    </div>
-                  </ng-container>
-                </ng-container>
-                <button mat-flat-button [color]="'primary'">
-                  팝업창만들기
-                </button>
-              </div>
-
-              <mat-paginator
-                class="sm:absolute sm:inset-x-0 sm:bottom-0 border-b sm:border-t sm:border-b-0 z-10 bg-gray-50 dark:bg-transparent"
-                [ngClass]="{ 'pointer-events-none': isLoading }"
-                [length]="pagination?.length"
-                [pageIndex]="pagination?.page"
-                [pageSize]="pagination?.size"
-                [pageSizeOptions]="[5, 10, 25, 100]"
-                [showFirstLastButtons]="true"
-              ></mat-paginator>
-            </ng-container>
-          </ng-container>
-
-          <ng-template #noPopup>
-            <div
-              class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
+          <div class="text-lg font-medium tracking-tight leading-6 truncate">
+            팝업 관리
+          </div>
+          <div class="flex flex-col flex-auto mt-2 overflow-x-auto">
+            <table
+              class="min-w-240 overflow-y-visible"
+              mat-table
+              [dataSource]="popupDataSource"
             >
-              There are no popups!
-            </div>
-          </ng-template>
+              <!-- Index -->
+              <ng-container matColumnDef="index">
+                <th mat-header-cell *matHeaderCellDef>번호</th>
+                <td mat-cell *matCellDef="let info">
+                  <span class="font-medium text-right">
+                    {{ info.index }}
+                  </span>
+                </td>
+              </ng-container>
+
+              <!-- Title -->
+              <ng-container matColumnDef="title">
+                <th mat-header-cell *matHeaderCellDef>제목</th>
+                <td mat-cell *matCellDef="let info">
+                  <span class="font-medium text-right">
+                    {{ info.title }}
+                  </span>
+                </td>
+              </ng-container>
+
+              <!-- Width -->
+              <ng-container matColumnDef="widthSize">
+                <th mat-header-cell *matHeaderCellDef>가로</th>
+                <td mat-cell *matCellDef="let info">
+                  <span class="font-medium text-right">{{
+                    info.widthSize
+                  }}</span>
+                </td>
+              </ng-container>
+
+              <!-- Height -->
+              <ng-container matColumnDef="heightSize">
+                <th mat-header-cell *matHeaderCellDef>세로</th>
+                <td mat-cell *matCellDef="let info">
+                  <span class="font-medium text-right">{{
+                    info.heightSize
+                  }}</span>
+                </td>
+              </ng-container>
+
+              <!-- Top -->
+              <ng-container matColumnDef="topMargin">
+                <th mat-header-cell *matHeaderCellDef>위에서부터</th>
+                <td mat-cell *matCellDef="let info">
+                  <span class="font-medium text-right">{{
+                    info.topMargin
+                  }}</span>
+                </td>
+              </ng-container>
+
+              <!-- Left -->
+              <ng-container matColumnDef="leftMargin">
+                <th mat-header-cell *matHeaderCellDef>왼쪽에서부터</th>
+                <td mat-cell *matCellDef="let info">
+                  <span class="font-medium text-right">{{
+                    info.leftMargin
+                  }}</span>
+                </td>
+              </ng-container>
+
+              <!-- Site -->
+              <ng-container matColumnDef="site">
+                <th mat-header-cell *matHeaderCellDef>사이트</th>
+                <td mat-cell *matCellDef="let info">
+                  <span class="font-medium text-right">{{ info.site }}</span>
+                </td>
+              </ng-container>
+
+              <!-- Is Use -->
+              <ng-container matColumnDef="useOrNot">
+                <th mat-header-cell *matHeaderCellDef>사용여부</th>
+                <td mat-cell *matCellDef="let info">
+                  <span class="font-medium text-right">{{
+                    info.useOrNot
+                  }}</span>
+                </td>
+              </ng-container>
+
+              <!-- Btn -->
+              <ng-container matColumnDef="btn">
+                <th mat-header-cell *matHeaderCellDef>비고</th>
+                <td mat-cell *matCellDef="let info">
+                  <div class="flex items-center mt-2 py-3 space-x-4">
+                    <button class="flex-auto" type="button" mat-stroked-button>
+                      수정
+                    </button>
+                    <button class="flex-auto" type="button" mat-stroked-button>
+                      삭제
+                    </button>
+                  </div>
+                </td>
+              </ng-container>
+
+              <!-- Footer -->
+              <ng-container matColumnDef="popupTableFooter">
+                <td
+                  class="py-6 px-0 border-0"
+                  mat-footer-cell
+                  *matFooterCellDef
+                  colspan="9"
+                >
+                  <div lass="flex items-center mt-2 py-3 space-x-4">
+                    <button mat-stroked-button>팝업창 만들기</button>
+                  </div>
+                </td>
+              </ng-container>
+
+              <tr mat-header-row *matHeaderRowDef="popupTableColumns"></tr>
+              <tr mat-row *matRowDef="let row; columns: popupTableColumns"></tr>
+              <tr
+                class="h-16 border-0"
+                mat-footer-row
+                *matFooterRowDef="['popupTableFooter']"
+              ></tr>
+            </table>
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/app/modules/admin/board/popup/components/list.component.ts b/src/app/modules/admin/board/popup/components/list.component.ts
index 9effff6..8180d66 100644
--- a/src/app/modules/admin/board/popup/components/list.component.ts
+++ b/src/app/modules/admin/board/popup/components/list.component.ts
@@ -34,6 +34,7 @@ import { Popup } from '../models/popup';
 import { PopupPagination } from '../models/popup-pagination';
 import { PopupService } from '../services/popup.service';
 import { Router } from '@angular/router';
+import { MatTableDataSource } from '@angular/material/table';
 
 @Component({
   selector: 'popup-list',
@@ -76,6 +77,20 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
 
   private _unsubscribeAll: Subject<any> = new Subject<any>();
 
+  popupTableColumns: string[] = [
+    'index',
+    'title',
+    'widthSize',
+    'heightSize',
+    'topMargin',
+    'leftMargin',
+    'site',
+    'useOrNot',
+    'btn',
+  ];
+
+  popupDataSource: MatTableDataSource<Popup> = new MatTableDataSource();
+
   /**
    * Constructor
    */
@@ -95,19 +110,17 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
    * On init
    */
   ngOnInit(): void {
-    // Get the pagination
-    this._popupService.pagination$
+    this._popupService.popups$
       .pipe(takeUntil(this._unsubscribeAll))
-      .subscribe((pagination: PopupPagination | undefined) => {
-        // Update the pagination
-        this.pagination = pagination;
+      .subscribe((popups: Popup[] | undefined) => {
+        if (!popups) {
+          return;
+        }
 
+        this.popupDataSource.data = popups;
         // Mark for check
         this._changeDetectorRef.markForCheck();
       });
-
-    // Get the products
-    this.popups$ = this._popupService.popups$;
   }
 
   /**
diff --git a/src/app/modules/admin/board/popup/components/redit.component.html b/src/app/modules/admin/board/popup/components/redit.component.html
new file mode 100644
index 0000000..eb397d8
--- /dev/null
+++ b/src/app/modules/admin/board/popup/components/redit.component.html
@@ -0,0 +1,83 @@
+<div class="flex flex-col flex-auto min-w-0">
+  <div class="flex-auto border-t -mt-px pt-4 sm:pt-6">
+    <div class="w-full max-w-screen-xl mx-auto">
+      <div class="grid grid-cols-1 sm:grid-cols-6 gap-6 w-full min-w-0">
+        <!-- Budget distribution -->
+        <div
+          class="sm:col-span-6 flex flex-col flex-auto p-6 bg-card shadow rounded-2xl overflow-hidden"
+        >
+          <div class="text-lg font-medium tracking-tight leading-6 truncate">
+            고객센터템플릿 {{ !targetTemplate ? "등록" : "수정" }}
+          </div>
+          <div class="flex flex-col flex-auto mt-2 overflow-x-auto">
+            <form
+              [formGroup]="targetTemplateForm"
+              autocomplete="off"
+              class="flex flex-col flex-auto p-6 sm:p-8 overflow-y-auto"
+            >
+              <mat-divider class="mt-6 mb-8"></mat-divider>
+
+              <!-- Title -->
+              <div>
+                <mat-form-field
+                  class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full"
+                >
+                  <mat-label>제목</mat-label>
+                  <input matInput [formControlName]="'title'" />
+                </mat-form-field>
+              </div>
+
+              <!-- Notes -->
+              <div class="mt-8">
+                <mat-form-field
+                  class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full"
+                >
+                  <mat-label>순번</mat-label>
+                  <input matInput [formControlName]="'order'" />
+                </mat-form-field>
+              </div>
+              <!-- Body -->
+              <!-- <quill-editor class="mt-2"></quill-editor> -->
+              <mat-form-field
+                class="mt-8 fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full"
+              >
+                <textarea
+                  matInput
+                  [required]="true"
+                  [rows]="5"
+                  matTextareaAutosize
+                  [formControlName]="'content'"
+                ></textarea>
+                <mat-label>내용</mat-label>
+              </mat-form-field>
+            </form>
+          </div>
+          <!-- Actions -->
+          <div
+            class="flex flex-col sm:flex-row sm:items-center justify-between mt-4 sm:mt-6"
+          >
+            <div class="flex items-center mt-4 sm:mt-0">
+              <!-- Save as draft -->
+              <button
+                class="sm:mx-3"
+                mat-stroked-button
+                (click)="__onClickeCancel()"
+              >
+                <span>취소</span>
+              </button>
+              <!-- Send -->
+              <button
+                class="order-first sm:order-last"
+                mat-flat-button
+                [color]="'primary'"
+                (click)="__onClickReditBtn(targetTemplate)"
+              >
+                {{ !targetTemplate ? "등록" : "수정" }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/app/modules/admin/board/popup/components/edit.component.ts b/src/app/modules/admin/board/popup/components/redit.component.ts
similarity index 70%
rename from src/app/modules/admin/board/popup/components/edit.component.ts
rename to src/app/modules/admin/board/popup/components/redit.component.ts
index 22434a3..0816d2f 100644
--- a/src/app/modules/admin/board/popup/components/edit.component.ts
+++ b/src/app/modules/admin/board/popup/components/redit.component.ts
@@ -31,10 +31,13 @@ import { FuseConfirmationService } from '@fuse/services/confirmation';
 
 import { User } from 'app/modules/admin/member/user/models/user';
 import { UserService } from 'app/modules/admin/member/user/services/user.service';
+import { ActivatedRoute, Router } from '@angular/router';
+import { CustomerTemplateService } from '../services/customer-template.service';
+import { CustomerTemplate } from '../models/ customer-template';
 
 @Component({
-  selector: 'popup-edit',
-  templateUrl: './edit.component.html',
+  selector: 'customer-template-redit',
+  templateUrl: './redit.component.html',
   styles: [
     /* language=SCSS */
     `
@@ -59,15 +62,17 @@ import { UserService } from 'app/modules/admin/member/user/services/user.service
   changeDetection: ChangeDetectionStrategy.OnPush,
   animations: fuseAnimations,
 })
-export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
+export class ReditComponent implements OnInit, AfterViewInit, OnDestroy {
   @ViewChild(MatPaginator) private _paginator!: MatPaginator;
   @ViewChild(MatSort) private _sort!: MatSort;
 
   isLoading = false;
   searchInputControl = new FormControl();
-  selectedProductForm!: FormGroup;
+  targetTemplateForm!: FormGroup;
   selectedUser?: User;
 
+  targetTemplate?: CustomerTemplate | undefined;
+
   private _unsubscribeAll: Subject<any> = new Subject<any>();
 
   /**
@@ -77,7 +82,10 @@ export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
     private _changeDetectorRef: ChangeDetectorRef,
     private _fuseConfirmationService: FuseConfirmationService,
     private _formBuilder: FormBuilder,
-    private _userService: UserService
+    private _customerTemplateService: CustomerTemplateService,
+    private _userService: UserService,
+    private _route: ActivatedRoute,
+    private _router: Router
   ) {}
 
   // -----------------------------------------------------------------------------------------------------
@@ -88,53 +96,31 @@ export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
    * On init
    */
   ngOnInit(): void {
-    this.selectedProductForm = this._formBuilder.group({
-      id: [''],
-      signinId: [{ value: '', disabled: true }],
-      signinPw: [{ value: '' }],
-      exchangePw: [''],
-      description: [''],
-      tags: [[]],
-      nickname: [{ value: '', disabled: true }],
-      ownCash: [''],
-      phoneNumber: [''],
-      level: [''],
-      status: [''],
-      isExcahngeMoney: [''],
-      bankname: [''],
-      accountNumber: [''],
-      accountHolder: [''],
-      comp: [''],
-      coupon: [''],
-      recommender: [{ value: '', disabled: true }],
-      changeSite: [''],
-      recommendCount: [''],
-      hodingGameMoney: [{ value: '0', disabled: true }],
-      memo: [''],
-      bacaraRate: [],
-      rulletRate: [],
-      dragonRate: [],
-      etcRate: [],
-      slotRate: [],
-      casinoRusingRate: [],
-      slotRusingRate: [],
+    this.targetTemplateForm = this._formBuilder.group({
+      title: [''],
+      order: [''],
+      content: [''],
     });
+    const idx = this._route.snapshot.params['id'];
 
     // Get the User
-    this._userService.user$
+    this._customerTemplateService.customerTemplate$
       .pipe(takeUntil(this._unsubscribeAll))
-      .subscribe((user: User | undefined) => {
-        if (!user) {
+      .subscribe((targetTemplate: CustomerTemplate | undefined) => {
+        this.targetTemplate = targetTemplate;
+
+        if (!this.targetTemplate) {
           return;
         }
-        this.selectedUser = user;
 
-        this.selectedProductForm.patchValue(user);
+        this.targetTemplateForm.patchValue({
+          title: this.targetTemplate.title,
+          content: this.targetTemplate.content,
+          order: this.targetTemplate.order,
+        });
         // Mark for check
         this._changeDetectorRef.markForCheck();
       });
-
-    /* this.user$ = this._userService.user$; */
   }
 
   /**
@@ -170,6 +156,13 @@ export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
    * @param productId
    */
   __toggleDetails(productId: string): void {}
+  __onClickeCancel(): void {
+    let url: string = 'board/customer-template/';
+    this._router.navigateByUrl(url);
+  }
+  __onClickReditBtn(targetTemplate: CustomerTemplate | undefined): void {
+    console.log('click: ', targetTemplate?.id);
+  }
 
   /**
    * Track by function for ngFor loops
diff --git a/src/app/modules/admin/board/popup/components/registration.component.html b/src/app/modules/admin/board/popup/components/registration.component.html
deleted file mode 100644
index b489bd2..0000000
--- a/src/app/modules/admin/board/popup/components/registration.component.html
+++ /dev/null
@@ -1,2 +0,0 @@
-<!-- Title -->
-<div class="text-4xl font-extrabold tracking-tight">팝업-등록 page</div>
diff --git a/src/app/modules/admin/board/popup/components/registration.component.ts b/src/app/modules/admin/board/popup/components/registration.component.ts
deleted file mode 100644
index 27b49c9..0000000
--- a/src/app/modules/admin/board/popup/components/registration.component.ts
+++ /dev/null
@@ -1,183 +0,0 @@
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  OnDestroy,
-  OnInit,
-  ViewChild,
-  ViewEncapsulation,
-} from '@angular/core';
-import {
-  FormBuilder,
-  FormControl,
-  FormGroup,
-  Validators,
-} from '@angular/forms';
-import { MatCheckboxChange } from '@angular/material/checkbox';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
-import {
-  debounceTime,
-  map,
-  merge,
-  Observable,
-  Subject,
-  switchMap,
-  takeUntil,
-} from 'rxjs';
-import { fuseAnimations } from '@fuse/animations';
-import { FuseConfirmationService } from '@fuse/services/confirmation';
-
-import { User } from 'app/modules/admin/member/user/models/user';
-import { UserService } from 'app/modules/admin/member/user/services/user.service';
-
-@Component({
-  selector: 'popup-registration',
-  templateUrl: './registration.component.html',
-  styles: [
-    /* language=SCSS */
-    `
-      .inventory-grid {
-        grid-template-columns: 48px auto 40px;
-
-        @screen sm {
-          grid-template-columns: 48px auto 112px 72px;
-        }
-
-        @screen md {
-          grid-template-columns: 48px 112px auto 112px 72px;
-        }
-
-        @screen lg {
-          grid-template-columns: 48px 112px auto 112px 96px 96px 72px;
-        }
-      }
-    `,
-  ],
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  animations: fuseAnimations,
-})
-export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
-  @ViewChild(MatPaginator) private _paginator!: MatPaginator;
-  @ViewChild(MatSort) private _sort!: MatSort;
-
-  isLoading = false;
-  searchInputControl = new FormControl();
-  selectedProductForm!: FormGroup;
-  selectedUser?: User;
-
-  private _unsubscribeAll: Subject<any> = new Subject<any>();
-
-  /**
-   * Constructor
-   */
-  constructor(
-    private _changeDetectorRef: ChangeDetectorRef,
-    private _fuseConfirmationService: FuseConfirmationService,
-    private _formBuilder: FormBuilder,
-    private _userService: UserService
-  ) {}
-
-  // -----------------------------------------------------------------------------------------------------
-  // @ Lifecycle hooks
-  // -----------------------------------------------------------------------------------------------------
-
-  /**
-   * On init
-   */
-  ngOnInit(): void {
-    this.selectedProductForm = this._formBuilder.group({
-      id: [''],
-      signinId: [{ value: '', disabled: true }],
-      signinPw: [{ value: '' }],
-      exchangePw: [''],
-      description: [''],
-      tags: [[]],
-      nickname: [{ value: '', disabled: true }],
-      ownCash: [''],
-      phoneNumber: [''],
-      level: [''],
-      status: [''],
-      isExcahngeMoney: [''],
-      bankname: [''],
-      accountNumber: [''],
-      accountHolder: [''],
-      comp: [''],
-      coupon: [''],
-      recommender: [{ value: '', disabled: true }],
-      changeSite: [''],
-      recommendCount: [''],
-      hodingGameMoney: [{ value: '0', disabled: true }],
-      memo: [''],
-      bacaraRate: [],
-      rulletRate: [],
-      dragonRate: [],
-      etcRate: [],
-      slotRate: [],
-      casinoRusingRate: [],
-      slotRusingRate: [],
-    });
-
-    // Get the User
-    this._userService.user$
-      .pipe(takeUntil(this._unsubscribeAll))
-      .subscribe((user: User | undefined) => {
-        if (!user) {
-          return;
-        }
-        this.selectedUser = user;
-
-        this.selectedProductForm.patchValue(user);
-        // Mark for check
-        this._changeDetectorRef.markForCheck();
-      });
-
-    /* this.user$ = this._userService.user$; */
-  }
-
-  /**
-   * After view init
-   */
-  ngAfterViewInit(): void {}
-
-  /**
-   * On destroy
-   */
-  ngOnDestroy(): void {
-    // Unsubscribe from all subscriptions
-    this._unsubscribeAll.next(null);
-    this._unsubscribeAll.complete();
-  }
-
-  // -----------------------------------------------------------------------------------------------------
-  // @ Public methods
-  // -----------------------------------------------------------------------------------------------------
-
-  // -----------------------------------------------------------------------------------------------------
-  // @ Private methods
-  // -----------------------------------------------------------------------------------------------------
-
-  /**
-   * Create product
-   */
-  __createProduct(): void {}
-
-  /**
-   * Toggle product details
-   *
-   * @param productId
-   */
-  __toggleDetails(productId: string): void {}
-
-  /**
-   * Track by function for ngFor loops
-   *
-   * @param index
-   * @param item
-   */
-  __trackByFn(index: number, item: any): any {
-    return item.id || index;
-  }
-}
diff --git a/src/app/modules/admin/board/popup/components/view.component.html b/src/app/modules/admin/board/popup/components/view.component.html
deleted file mode 100644
index 4e4f148..0000000
--- a/src/app/modules/admin/board/popup/components/view.component.html
+++ /dev/null
@@ -1,2 +0,0 @@
-<!-- Title -->
-<div class="text-4xl font-extrabold tracking-tight">팝업-상세page</div>
diff --git a/src/app/modules/admin/board/popup/components/view.component.ts b/src/app/modules/admin/board/popup/components/view.component.ts
deleted file mode 100644
index 53a6e2d..0000000
--- a/src/app/modules/admin/board/popup/components/view.component.ts
+++ /dev/null
@@ -1,183 +0,0 @@
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  OnDestroy,
-  OnInit,
-  ViewChild,
-  ViewEncapsulation,
-} from '@angular/core';
-import {
-  FormBuilder,
-  FormControl,
-  FormGroup,
-  Validators,
-} from '@angular/forms';
-import { MatCheckboxChange } from '@angular/material/checkbox';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
-import {
-  debounceTime,
-  map,
-  merge,
-  Observable,
-  Subject,
-  switchMap,
-  takeUntil,
-} from 'rxjs';
-import { fuseAnimations } from '@fuse/animations';
-import { FuseConfirmationService } from '@fuse/services/confirmation';
-
-import { User } from 'app/modules/admin/member/user/models/user';
-import { UserService } from 'app/modules/admin/member/user/services/user.service';
-
-@Component({
-  selector: 'popup-view',
-  templateUrl: './view.component.html',
-  styles: [
-    /* language=SCSS */
-    `
-      .inventory-grid {
-        grid-template-columns: 48px auto 40px;
-
-        @screen sm {
-          grid-template-columns: 48px auto 112px 72px;
-        }
-
-        @screen md {
-          grid-template-columns: 48px 112px auto 112px 72px;
-        }
-
-        @screen lg {
-          grid-template-columns: 48px 112px auto 112px 96px 96px 72px;
-        }
-      }
-    `,
-  ],
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  animations: fuseAnimations,
-})
-export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
-  @ViewChild(MatPaginator) private _paginator!: MatPaginator;
-  @ViewChild(MatSort) private _sort!: MatSort;
-
-  isLoading = false;
-  searchInputControl = new FormControl();
-  selectedProductForm!: FormGroup;
-  selectedUser?: User;
-
-  private _unsubscribeAll: Subject<any> = new Subject<any>();
-
-  /**
-   * Constructor
-   */
-  constructor(
-    private _changeDetectorRef: ChangeDetectorRef,
-    private _fuseConfirmationService: FuseConfirmationService,
-    private _formBuilder: FormBuilder,
-    private _userService: UserService
-  ) {}
-
-  // -----------------------------------------------------------------------------------------------------
-  // @ Lifecycle hooks
-  // -----------------------------------------------------------------------------------------------------
-
-  /**
-   * On init
-   */
-  ngOnInit(): void {
-    this.selectedProductForm = this._formBuilder.group({
-      id: [''],
-      signinId: [{ value: '', disabled: true }],
-      signinPw: [{ value: '' }],
-      exchangePw: [''],
-      description: [''],
-      tags: [[]],
-      nickname: [{ value: '', disabled: true }],
-      ownCash: [''],
-      phoneNumber: [''],
-      level: [''],
-      status: [''],
-      isExcahngeMoney: [''],
-      bankname: [''],
-      accountNumber: [''],
-      accountHolder: [''],
-      comp: [''],
-      coupon: [''],
-      recommender: [{ value: '', disabled: true }],
-      changeSite: [''],
-      recommendCount: [''],
-      hodingGameMoney: [{ value: '0', disabled: true }],
-      memo: [''],
-      bacaraRate: [],
-      rulletRate: [],
-      dragonRate: [],
-      etcRate: [],
-      slotRate: [],
-      casinoRusingRate: [],
-      slotRusingRate: [],
-    });
-
-    // Get the User
-    this._userService.user$
-      .pipe(takeUntil(this._unsubscribeAll))
-      .subscribe((user: User | undefined) => {
-        if (!user) {
-          return;
-        }
-        this.selectedUser = user;
-
-        this.selectedProductForm.patchValue(user);
-        // Mark for check
-        this._changeDetectorRef.markForCheck();
-      });
-
-    /* this.user$ = this._userService.user$; */
-  }
-
-  /**
-   * After view init
-   */
-  ngAfterViewInit(): void {}
-
-  /**
-   * On destroy
-   */
-  ngOnDestroy(): void {
-    // Unsubscribe from all subscriptions
-    this._unsubscribeAll.next(null);
-    this._unsubscribeAll.complete();
-  }
-
-  // -----------------------------------------------------------------------------------------------------
-  // @ Public methods
-  // -----------------------------------------------------------------------------------------------------
-
-  // -----------------------------------------------------------------------------------------------------
-  // @ Private methods
-  // -----------------------------------------------------------------------------------------------------
-
-  /**
-   * Create product
-   */
-  __createProduct(): void {}
-
-  /**
-   * Toggle product details
-   *
-   * @param productId
-   */
-  __toggleDetails(productId: string): void {}
-
-  /**
-   * Track by function for ngFor loops
-   *
-   * @param index
-   * @param item
-   */
-  __trackByFn(index: number, item: any): any {
-    return item.id || index;
-  }
-}
diff --git a/src/app/modules/admin/board/popup/models/popup.ts b/src/app/modules/admin/board/popup/models/popup.ts
index d49a9b3..7c342ce 100644
--- a/src/app/modules/admin/board/popup/models/popup.ts
+++ b/src/app/modules/admin/board/popup/models/popup.ts
@@ -3,9 +3,9 @@ export interface Popup {
   index?: number;
   title?: string;
   widthSize?: number;
-  verticalSize?: number;
+  heightSize?: number;
   topMargin?: number;
   leftMargin?: number;
-  Site?: string;
+  site?: string;
   useOrNot?: string;
 }
diff --git a/src/app/modules/admin/board/popup/popup.module.ts b/src/app/modules/admin/board/popup/popup.module.ts
index 0691ccc..619b1ac 100644
--- a/src/app/modules/admin/board/popup/popup.module.ts
+++ b/src/app/modules/admin/board/popup/popup.module.ts
@@ -11,10 +11,8 @@ import { MatRippleModule } from '@angular/material/core';
 import { MatSortModule } from '@angular/material/sort';
 import { MatSelectModule } from '@angular/material/select';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { MatGridListModule } from '@angular/material/grid-list';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { MatRadioModule } from '@angular/material/radio';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatTableModule } from '@angular/material/table';
 
 import { TranslocoModule } from '@ngneat/transloco';
 
@@ -41,10 +39,8 @@ import { popupRoutes } from './popup.routing';
     MatSortModule,
     MatSelectModule,
     MatTooltipModule,
-    MatGridListModule,
-    MatSlideToggleModule,
-    MatRadioModule,
     MatCheckboxModule,
+    MatTableModule,
   ],
 })
 export class PopupModule {}