From 82aa07b3845d6b54f2d5665df603fda60a3c58d9 Mon Sep 17 00:00:00 2001
From: byung eun park <geekdev@naver.com>
Date: Fri, 27 Sep 2019 23:14:37 +0900
Subject: [PATCH] money page design

---
 .../money/component/deposit.component.html    | 168 +++++++++++++++++-
 .../money/component/deposit.component.scss    | 117 ++++++++++++
 .../money/component/deposit.component.ts      |   9 +
 .../money/component/money-log.component.html  | 168 +++++++++++++++++-
 .../money/component/money-log.component.scss  | 117 ++++++++++++
 .../money/component/money-log.component.ts    |  69 ++++++-
 .../money/component/point-log.component.html  | 168 +++++++++++++++++-
 .../money/component/point-log.component.scss  | 117 ++++++++++++
 .../money/component/point-log.component.ts    |  69 ++++++-
 .../money/component/withdrawal.component.html | 168 +++++++++++++++++-
 .../money/component/withdrawal.component.scss | 117 ++++++++++++
 .../money/component/withdrawal.component.ts   |  69 ++++++-
 12 files changed, 1337 insertions(+), 19 deletions(-)

diff --git a/src/app/pages/moneys/money/component/deposit.component.html b/src/app/pages/moneys/money/component/deposit.component.html
index c98b60a..9c39a93 100644
--- a/src/app/pages/moneys/money/component/deposit.component.html
+++ b/src/app/pages/moneys/money/component/deposit.component.html
@@ -1 +1,167 @@
-<p>deposit works!</p>
+<div id="deposit-list" class="page-layout carded fullwidth inner-scroll">
+  <!-- TOP BACKGROUND -->
+  <div class="top-bg accent"></div>
+  <!-- / TOP BACKGROUND -->
+
+  <!-- CENTER -->
+  <div class="center">
+    <!-- HEADER -->
+    <div
+      class="header accent"
+      fxLayout="column"
+      fxLayoutAlign="center center"
+      fxLayout.gt-xs="row"
+      fxLayoutAlign.gt-xs="space-between center"
+    >
+      <!-- APP TITLE -->
+      <div
+        class="logo mb-24 mb-sm-0"
+        fxLayout="row"
+        fxLayoutAlign="start center"
+      >
+        <mat-icon
+          class="logo-icon s-32 mr-16"
+          [@animate]="{ value: '*', params: { delay: '50ms', scale: '0.2' } }"
+        >
+          shopping_basket
+        </mat-icon>
+        <span
+          class="logo-text h1"
+          [@animate]="{ value: '*', params: { delay: '100ms', x: '-25px' } }"
+          >고객센터 관리</span
+        >
+      </div>
+      <!-- / APP TITLE -->
+
+      <!-- SEARCH -->
+
+      <!-- <div class="search-wrapper  ml-sm-32">
+        <div class="search" fxFlex fxLayout="row" fxLayoutAlign="start center">
+          <mat-icon>search</mat-icon>
+          <input #filter placeholder="Search for an order" />
+        </div>
+      </div> -->
+      <!-- / SEARCH -->
+    </div>
+
+    <!-- / HEADER -->
+
+    <!-- CONTENT CARD -->
+    <div class="content-card">
+      <mat-table
+        class="service-center"
+        #table
+        [dataSource]="dataSource"
+        matSort
+        [@animateStagger]="{ value: '50' }"
+        fusePerfectScrollbar
+      >
+        <ng-container matColumnDef="idx">
+          <mat-header-cell *matHeaderCellDef mat-sort-header
+            >번호</mat-header-cell
+          >
+          <mat-cell *matCellDef="let serviceCenter; let i = index">
+            <p class="text-truncate">{{ i }}</p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- ID/Nickname Column -->
+        <ng-container matColumnDef="title">
+          <mat-header-cell *matHeaderCellDef mat-sort-header
+            >제목</mat-header-cell
+          >
+          <mat-cell *matCellDef="let serviceCenter">
+            <p class="text-truncate">{{ serviceCenter.title }}</p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Phone Column -->
+        <ng-container matColumnDef="contents">
+          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm
+            >내용</mat-header-cell
+          >
+          <mat-cell *matCellDef="let serviceCenter" fxHide fxShow.gt-sm>
+            <!-- <p class="text-truncate">{{ serviceCenter.contents }}</p> -->
+            <p class="text-truncate">010-3004-2001</p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Total Price Column -->
+        <ng-container matColumnDef="register">
+          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-md
+            >작성자</mat-header-cell
+          >
+          <mat-cell *matCellDef="let serviceCenter" fxHide fxShow.gt-md>
+            <p class="total-price text-truncate">
+              <!-- {{ user.totalprice | currency: 'USD':'symbol' }} -->
+              1,000,000
+            </p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Point Column -->
+        <ng-container matColumnDef="createdAt">
+          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm
+            >작성일</mat-header-cell
+          >
+          <mat-cell *matCellDef="let serviceCenter" fxHide fxShow.gt-sm>
+            <p class="text-truncate">
+              <!-- {{ user.point }} -->
+              5000
+            </p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Level Column -->
+        <ng-container matColumnDef="contactStatus">
+          <mat-header-cell *matHeaderCellDef mat-sort-header
+            >문의상태</mat-header-cell
+          >
+          <mat-cell *matCellDef="let serviceCenter">
+            <!-- <p class="status text-truncate h6 p-4" [ngClass]="order.status[0].color"> -->
+            <p class="text-truncate">
+              <!-- {{ user.level }} -->
+              브론즈
+            </p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Charge Money Column -->
+        <ng-container matColumnDef="removeBtn">
+          <mat-header-cell *matHeaderCellDef mat-sort-header
+            >삭제버튼</mat-header-cell
+          >
+          <mat-cell *matCellDef="let user">
+            <p class="text-truncate ">
+              <button mat-raised-button class="mat-accent">
+                삭제
+              </button>
+            </p>
+          </mat-cell>
+        </ng-container>
+
+        <mat-header-row
+          *matHeaderRowDef="displayedColumns; sticky: true"
+        ></mat-header-row>
+
+        <mat-row
+          *matRowDef="let user; columns: displayedColumns"
+          class="user"
+          matRipple
+          [routerLink]="'/pages/users/management/list/' + user.id"
+        >
+        </mat-row>
+      </mat-table>
+
+      <mat-paginator
+        #paginator
+        [pageIndex]="0"
+        [pageSize]="10"
+        [pageSizeOptions]="[5, 10, 25, 100]"
+      >
+      </mat-paginator>
+    </div>
+    <!-- / CONTENT CARD -->
+  </div>
+  <!-- / CENTER -->
+</div>
diff --git a/src/app/pages/moneys/money/component/deposit.component.scss b/src/app/pages/moneys/money/component/deposit.component.scss
index e69de29..20594a7 100644
--- a/src/app/pages/moneys/money/component/deposit.component.scss
+++ b/src/app/pages/moneys/money/component/deposit.component.scss
@@ -0,0 +1,117 @@
+@import 'src/@fuse/scss/fuse';
+
+app-pages-deposit-list {
+  #deposit-list {
+    .top-bg {
+      @include media-breakpoint('xs') {
+        height: 224px;
+      }
+    }
+
+    > .center {
+      > .header {
+        .search-wrapper {
+          width: 100%;
+          max-width: 480px;
+          border-radius: 28px;
+          overflow: hidden;
+          @include mat-elevation(1);
+
+          @include media-breakpoint('xs') {
+            width: 100%;
+          }
+
+          .search {
+            width: 100%;
+            height: 48px;
+            line-height: 48px;
+            padding: 0 18px;
+
+            input {
+              width: 100%;
+              height: 48px;
+              min-height: 48px;
+              max-height: 48px;
+              padding: 0 16px;
+              border: none;
+              outline: none;
+            }
+          }
+        }
+
+        @include media-breakpoint('xs') {
+          padding: 8px 0;
+          height: 160px !important;
+          min-height: 160px !important;
+          max-height: 160px !important;
+        }
+      }
+    }
+  }
+
+  .mat-tab-group,
+  .mat-tab-body-wrapper,
+  .tab-content {
+    flex: 1 1 auto;
+    max-width: 100%;
+  }
+
+  .service-center-table {
+    flex: 1 1 auto;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+
+    .mat-header-row {
+      min-height: 64px;
+    }
+
+    .user {
+      position: relative;
+      cursor: pointer;
+      height: 84px;
+    }
+
+    .mat-cell {
+      min-width: 0;
+      display: flex;
+      align-items: center;
+    }
+
+    .mat-column-id {
+      flex: 0 1 84px;
+    }
+
+    .mat-column-image {
+      flex: 0 1 84px;
+
+      .product-image {
+        width: 52px;
+        height: 52px;
+        border: 1px solid rgba(0, 0, 0, 0.12);
+      }
+    }
+
+    .mat-column-buttons {
+      flex: 0 1 80px;
+    }
+
+    .quantity-indicator {
+      display: inline-block;
+      vertical-align: middle;
+      width: 8px;
+      height: 8px;
+      border-radius: 4px;
+      margin-right: 8px;
+
+      & + span {
+        display: inline-block;
+        vertical-align: middle;
+      }
+    }
+
+    .active-icon {
+      border-radius: 50%;
+    }
+  }
+}
diff --git a/src/app/pages/moneys/money/component/deposit.component.ts b/src/app/pages/moneys/money/component/deposit.component.ts
index e53bf92..57dce90 100644
--- a/src/app/pages/moneys/money/component/deposit.component.ts
+++ b/src/app/pages/moneys/money/component/deposit.component.ts
@@ -23,6 +23,15 @@ import { fuseAnimations } from 'src/@fuse/animations';
   encapsulation: ViewEncapsulation.None
 })
 export class DepositComponent implements OnInit, OnDestroy, AfterViewInit {
+  displayedColumns = [
+    'idx',
+    'title',
+    'contents',
+    'register',
+    'createdAt',
+    'contactStatus'
+  ];
+
   @ViewChild(MatPaginator, { static: true })
   paginator: MatPaginator;
 
diff --git a/src/app/pages/moneys/money/component/money-log.component.html b/src/app/pages/moneys/money/component/money-log.component.html
index 594389d..27e92f6 100644
--- a/src/app/pages/moneys/money/component/money-log.component.html
+++ b/src/app/pages/moneys/money/component/money-log.component.html
@@ -1 +1,167 @@
-<p>money-log works!</p>
+<div id="money-log-list" class="page-layout carded fullwidth inner-scroll">
+  <!-- TOP BACKGROUND -->
+  <div class="top-bg accent"></div>
+  <!-- / TOP BACKGROUND -->
+
+  <!-- CENTER -->
+  <div class="center">
+    <!-- HEADER -->
+    <div
+      class="header accent"
+      fxLayout="column"
+      fxLayoutAlign="center center"
+      fxLayout.gt-xs="row"
+      fxLayoutAlign.gt-xs="space-between center"
+    >
+      <!-- APP TITLE -->
+      <div
+        class="logo mb-24 mb-sm-0"
+        fxLayout="row"
+        fxLayoutAlign="start center"
+      >
+        <mat-icon
+          class="logo-icon s-32 mr-16"
+          [@animate]="{ value: '*', params: { delay: '50ms', scale: '0.2' } }"
+        >
+          shopping_basket
+        </mat-icon>
+        <span
+          class="logo-text h1"
+          [@animate]="{ value: '*', params: { delay: '100ms', x: '-25px' } }"
+          >고객센터 관리</span
+        >
+      </div>
+      <!-- / APP TITLE -->
+
+      <!-- SEARCH -->
+
+      <!-- <div class="search-wrapper  ml-sm-32">
+        <div class="search" fxFlex fxLayout="row" fxLayoutAlign="start center">
+          <mat-icon>search</mat-icon>
+          <input #filter placeholder="Search for an order" />
+        </div>
+      </div> -->
+      <!-- / SEARCH -->
+    </div>
+
+    <!-- / HEADER -->
+
+    <!-- CONTENT CARD -->
+    <div class="content-card">
+      <mat-table
+        class="service-center"
+        #table
+        [dataSource]="dataSource"
+        matSort
+        [@animateStagger]="{ value: '50' }"
+        fusePerfectScrollbar
+      >
+        <ng-container matColumnDef="idx">
+          <mat-header-cell *matHeaderCellDef mat-sort-header
+            >번호</mat-header-cell
+          >
+          <mat-cell *matCellDef="let serviceCenter; let i = index">
+            <p class="text-truncate">{{ i }}</p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- ID/Nickname Column -->
+        <ng-container matColumnDef="title">
+          <mat-header-cell *matHeaderCellDef mat-sort-header
+            >제목</mat-header-cell
+          >
+          <mat-cell *matCellDef="let serviceCenter">
+            <p class="text-truncate">{{ serviceCenter.title }}</p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Phone Column -->
+        <ng-container matColumnDef="contents">
+          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm
+            >내용</mat-header-cell
+          >
+          <mat-cell *matCellDef="let serviceCenter" fxHide fxShow.gt-sm>
+            <!-- <p class="text-truncate">{{ serviceCenter.contents }}</p> -->
+            <p class="text-truncate">010-3004-2001</p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Total Price Column -->
+        <ng-container matColumnDef="register">
+          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-md
+            >작성자</mat-header-cell
+          >
+          <mat-cell *matCellDef="let serviceCenter" fxHide fxShow.gt-md>
+            <p class="total-price text-truncate">
+              <!-- {{ user.totalprice | currency: 'USD':'symbol' }} -->
+              1,000,000
+            </p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Point Column -->
+        <ng-container matColumnDef="createdAt">
+          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm
+            >작성일</mat-header-cell
+          >
+          <mat-cell *matCellDef="let serviceCenter" fxHide fxShow.gt-sm>
+            <p class="text-truncate">
+              <!-- {{ user.point }} -->
+              5000
+            </p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Level Column -->
+        <ng-container matColumnDef="contactStatus">
+          <mat-header-cell *matHeaderCellDef mat-sort-header
+            >문의상태</mat-header-cell
+          >
+          <mat-cell *matCellDef="let serviceCenter">
+            <!-- <p class="status text-truncate h6 p-4" [ngClass]="order.status[0].color"> -->
+            <p class="text-truncate">
+              <!-- {{ user.level }} -->
+              브론즈
+            </p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Charge Money Column -->
+        <ng-container matColumnDef="removeBtn">
+          <mat-header-cell *matHeaderCellDef mat-sort-header
+            >삭제버튼</mat-header-cell
+          >
+          <mat-cell *matCellDef="let user">
+            <p class="text-truncate ">
+              <button mat-raised-button class="mat-accent">
+                삭제
+              </button>
+            </p>
+          </mat-cell>
+        </ng-container>
+
+        <mat-header-row
+          *matHeaderRowDef="displayedColumns; sticky: true"
+        ></mat-header-row>
+
+        <mat-row
+          *matRowDef="let user; columns: displayedColumns"
+          class="user"
+          matRipple
+          [routerLink]="'/pages/users/management/list/' + user.id"
+        >
+        </mat-row>
+      </mat-table>
+
+      <mat-paginator
+        #paginator
+        [pageIndex]="0"
+        [pageSize]="10"
+        [pageSizeOptions]="[5, 10, 25, 100]"
+      >
+      </mat-paginator>
+    </div>
+    <!-- / CONTENT CARD -->
+  </div>
+  <!-- / CENTER -->
+</div>
diff --git a/src/app/pages/moneys/money/component/money-log.component.scss b/src/app/pages/moneys/money/component/money-log.component.scss
index e69de29..6a45c8a 100644
--- a/src/app/pages/moneys/money/component/money-log.component.scss
+++ b/src/app/pages/moneys/money/component/money-log.component.scss
@@ -0,0 +1,117 @@
+@import 'src/@fuse/scss/fuse';
+
+app-money-log-list {
+  #money-log-list {
+    .top-bg {
+      @include media-breakpoint('xs') {
+        height: 224px;
+      }
+    }
+
+    > .center {
+      > .header {
+        .search-wrapper {
+          width: 100%;
+          max-width: 480px;
+          border-radius: 28px;
+          overflow: hidden;
+          @include mat-elevation(1);
+
+          @include media-breakpoint('xs') {
+            width: 100%;
+          }
+
+          .search {
+            width: 100%;
+            height: 48px;
+            line-height: 48px;
+            padding: 0 18px;
+
+            input {
+              width: 100%;
+              height: 48px;
+              min-height: 48px;
+              max-height: 48px;
+              padding: 0 16px;
+              border: none;
+              outline: none;
+            }
+          }
+        }
+
+        @include media-breakpoint('xs') {
+          padding: 8px 0;
+          height: 160px !important;
+          min-height: 160px !important;
+          max-height: 160px !important;
+        }
+      }
+    }
+  }
+
+  .mat-tab-group,
+  .mat-tab-body-wrapper,
+  .tab-content {
+    flex: 1 1 auto;
+    max-width: 100%;
+  }
+
+  .service-center-table {
+    flex: 1 1 auto;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+
+    .mat-header-row {
+      min-height: 64px;
+    }
+
+    .user {
+      position: relative;
+      cursor: pointer;
+      height: 84px;
+    }
+
+    .mat-cell {
+      min-width: 0;
+      display: flex;
+      align-items: center;
+    }
+
+    .mat-column-id {
+      flex: 0 1 84px;
+    }
+
+    .mat-column-image {
+      flex: 0 1 84px;
+
+      .product-image {
+        width: 52px;
+        height: 52px;
+        border: 1px solid rgba(0, 0, 0, 0.12);
+      }
+    }
+
+    .mat-column-buttons {
+      flex: 0 1 80px;
+    }
+
+    .quantity-indicator {
+      display: inline-block;
+      vertical-align: middle;
+      width: 8px;
+      height: 8px;
+      border-radius: 4px;
+      margin-right: 8px;
+
+      & + span {
+        display: inline-block;
+        vertical-align: middle;
+      }
+    }
+
+    .active-icon {
+      border-radius: 50%;
+    }
+  }
+}
diff --git a/src/app/pages/moneys/money/component/money-log.component.ts b/src/app/pages/moneys/money/component/money-log.component.ts
index e34cf6b..6c0e9de 100644
--- a/src/app/pages/moneys/money/component/money-log.component.ts
+++ b/src/app/pages/moneys/money/component/money-log.component.ts
@@ -1,12 +1,71 @@
-import { Component, OnInit } from '@angular/core';
+import {
+  Component,
+  ElementRef,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+  ViewEncapsulation,
+  AfterViewInit
+} from '@angular/core';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+
+import { fromEvent, Subject } from 'rxjs';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+
+import { fuseAnimations } from 'src/@fuse/animations';
 
 @Component({
-  selector: 'app-money-log',
+  selector: 'app-money-log-list',
   templateUrl: './money-log.component.html',
-  styleUrls: ['./money-log.component.scss']
+  styleUrls: ['./money-log.component.scss'],
+  animations: fuseAnimations,
+  encapsulation: ViewEncapsulation.None
 })
-export class MoneyLogComponent implements OnInit {
-  constructor() {}
+export class MoneyLogComponent implements OnInit, OnDestroy, AfterViewInit {
+  displayedColumns = [
+    'idx',
+    'title',
+    'contents',
+    'register',
+    'createdAt',
+    'contactStatus'
+  ];
 
+  @ViewChild(MatPaginator, { static: true })
+  paginator: MatPaginator;
+
+  @ViewChild('filter', { static: true })
+  filter: ElementRef;
+
+  @ViewChild(MatSort, { static: true })
+  sort: MatSort;
+
+  // Private
+  private _unsubscribeAll: Subject<any>;
+
+  constructor() {
+    // Set the private defaults
+    this._unsubscribeAll = new Subject();
+  }
+
+  // -----------------------------------------------------------------------------------------------------
+  // @ Lifecycle hooks
+  // -----------------------------------------------------------------------------------------------------
+
+  /**
+   * On init
+   */
   ngOnInit() {}
+
+  /**
+   * On destroy
+   */
+  ngOnDestroy(): void {
+    // Unsubscribe from all subscriptions
+    this._unsubscribeAll.next();
+    this._unsubscribeAll.complete();
+  }
+
+  ngAfterViewInit(): void {}
 }
diff --git a/src/app/pages/moneys/money/component/point-log.component.html b/src/app/pages/moneys/money/component/point-log.component.html
index 9bbc145..5233a9c 100644
--- a/src/app/pages/moneys/money/component/point-log.component.html
+++ b/src/app/pages/moneys/money/component/point-log.component.html
@@ -1 +1,167 @@
-<p>point-log works!</p>
+<div id="point-log-list" class="page-layout carded fullwidth inner-scroll">
+  <!-- TOP BACKGROUND -->
+  <div class="top-bg accent"></div>
+  <!-- / TOP BACKGROUND -->
+
+  <!-- CENTER -->
+  <div class="center">
+    <!-- HEADER -->
+    <div
+      class="header accent"
+      fxLayout="column"
+      fxLayoutAlign="center center"
+      fxLayout.gt-xs="row"
+      fxLayoutAlign.gt-xs="space-between center"
+    >
+      <!-- APP TITLE -->
+      <div
+        class="logo mb-24 mb-sm-0"
+        fxLayout="row"
+        fxLayoutAlign="start center"
+      >
+        <mat-icon
+          class="logo-icon s-32 mr-16"
+          [@animate]="{ value: '*', params: { delay: '50ms', scale: '0.2' } }"
+        >
+          shopping_basket
+        </mat-icon>
+        <span
+          class="logo-text h1"
+          [@animate]="{ value: '*', params: { delay: '100ms', x: '-25px' } }"
+          >고객센터 관리</span
+        >
+      </div>
+      <!-- / APP TITLE -->
+
+      <!-- SEARCH -->
+
+      <!-- <div class="search-wrapper  ml-sm-32">
+        <div class="search" fxFlex fxLayout="row" fxLayoutAlign="start center">
+          <mat-icon>search</mat-icon>
+          <input #filter placeholder="Search for an order" />
+        </div>
+      </div> -->
+      <!-- / SEARCH -->
+    </div>
+
+    <!-- / HEADER -->
+
+    <!-- CONTENT CARD -->
+    <div class="content-card">
+      <mat-table
+        class="service-center"
+        #table
+        [dataSource]="dataSource"
+        matSort
+        [@animateStagger]="{ value: '50' }"
+        fusePerfectScrollbar
+      >
+        <ng-container matColumnDef="idx">
+          <mat-header-cell *matHeaderCellDef mat-sort-header
+            >번호</mat-header-cell
+          >
+          <mat-cell *matCellDef="let serviceCenter; let i = index">
+            <p class="text-truncate">{{ i }}</p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- ID/Nickname Column -->
+        <ng-container matColumnDef="title">
+          <mat-header-cell *matHeaderCellDef mat-sort-header
+            >제목</mat-header-cell
+          >
+          <mat-cell *matCellDef="let serviceCenter">
+            <p class="text-truncate">{{ serviceCenter.title }}</p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Phone Column -->
+        <ng-container matColumnDef="contents">
+          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm
+            >내용</mat-header-cell
+          >
+          <mat-cell *matCellDef="let serviceCenter" fxHide fxShow.gt-sm>
+            <!-- <p class="text-truncate">{{ serviceCenter.contents }}</p> -->
+            <p class="text-truncate">010-3004-2001</p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Total Price Column -->
+        <ng-container matColumnDef="register">
+          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-md
+            >작성자</mat-header-cell
+          >
+          <mat-cell *matCellDef="let serviceCenter" fxHide fxShow.gt-md>
+            <p class="total-price text-truncate">
+              <!-- {{ user.totalprice | currency: 'USD':'symbol' }} -->
+              1,000,000
+            </p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Point Column -->
+        <ng-container matColumnDef="createdAt">
+          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm
+            >작성일</mat-header-cell
+          >
+          <mat-cell *matCellDef="let serviceCenter" fxHide fxShow.gt-sm>
+            <p class="text-truncate">
+              <!-- {{ user.point }} -->
+              5000
+            </p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Level Column -->
+        <ng-container matColumnDef="contactStatus">
+          <mat-header-cell *matHeaderCellDef mat-sort-header
+            >문의상태</mat-header-cell
+          >
+          <mat-cell *matCellDef="let serviceCenter">
+            <!-- <p class="status text-truncate h6 p-4" [ngClass]="order.status[0].color"> -->
+            <p class="text-truncate">
+              <!-- {{ user.level }} -->
+              브론즈
+            </p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Charge Money Column -->
+        <ng-container matColumnDef="removeBtn">
+          <mat-header-cell *matHeaderCellDef mat-sort-header
+            >삭제버튼</mat-header-cell
+          >
+          <mat-cell *matCellDef="let user">
+            <p class="text-truncate ">
+              <button mat-raised-button class="mat-accent">
+                삭제
+              </button>
+            </p>
+          </mat-cell>
+        </ng-container>
+
+        <mat-header-row
+          *matHeaderRowDef="displayedColumns; sticky: true"
+        ></mat-header-row>
+
+        <mat-row
+          *matRowDef="let user; columns: displayedColumns"
+          class="user"
+          matRipple
+          [routerLink]="'/pages/users/management/list/' + user.id"
+        >
+        </mat-row>
+      </mat-table>
+
+      <mat-paginator
+        #paginator
+        [pageIndex]="0"
+        [pageSize]="10"
+        [pageSizeOptions]="[5, 10, 25, 100]"
+      >
+      </mat-paginator>
+    </div>
+    <!-- / CONTENT CARD -->
+  </div>
+  <!-- / CENTER -->
+</div>
diff --git a/src/app/pages/moneys/money/component/point-log.component.scss b/src/app/pages/moneys/money/component/point-log.component.scss
index e69de29..a09928a 100644
--- a/src/app/pages/moneys/money/component/point-log.component.scss
+++ b/src/app/pages/moneys/money/component/point-log.component.scss
@@ -0,0 +1,117 @@
+@import 'src/@fuse/scss/fuse';
+
+app-point-log-list {
+  #point-log-list {
+    .top-bg {
+      @include media-breakpoint('xs') {
+        height: 224px;
+      }
+    }
+
+    > .center {
+      > .header {
+        .search-wrapper {
+          width: 100%;
+          max-width: 480px;
+          border-radius: 28px;
+          overflow: hidden;
+          @include mat-elevation(1);
+
+          @include media-breakpoint('xs') {
+            width: 100%;
+          }
+
+          .search {
+            width: 100%;
+            height: 48px;
+            line-height: 48px;
+            padding: 0 18px;
+
+            input {
+              width: 100%;
+              height: 48px;
+              min-height: 48px;
+              max-height: 48px;
+              padding: 0 16px;
+              border: none;
+              outline: none;
+            }
+          }
+        }
+
+        @include media-breakpoint('xs') {
+          padding: 8px 0;
+          height: 160px !important;
+          min-height: 160px !important;
+          max-height: 160px !important;
+        }
+      }
+    }
+  }
+
+  .mat-tab-group,
+  .mat-tab-body-wrapper,
+  .tab-content {
+    flex: 1 1 auto;
+    max-width: 100%;
+  }
+
+  .service-center-table {
+    flex: 1 1 auto;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+
+    .mat-header-row {
+      min-height: 64px;
+    }
+
+    .user {
+      position: relative;
+      cursor: pointer;
+      height: 84px;
+    }
+
+    .mat-cell {
+      min-width: 0;
+      display: flex;
+      align-items: center;
+    }
+
+    .mat-column-id {
+      flex: 0 1 84px;
+    }
+
+    .mat-column-image {
+      flex: 0 1 84px;
+
+      .product-image {
+        width: 52px;
+        height: 52px;
+        border: 1px solid rgba(0, 0, 0, 0.12);
+      }
+    }
+
+    .mat-column-buttons {
+      flex: 0 1 80px;
+    }
+
+    .quantity-indicator {
+      display: inline-block;
+      vertical-align: middle;
+      width: 8px;
+      height: 8px;
+      border-radius: 4px;
+      margin-right: 8px;
+
+      & + span {
+        display: inline-block;
+        vertical-align: middle;
+      }
+    }
+
+    .active-icon {
+      border-radius: 50%;
+    }
+  }
+}
diff --git a/src/app/pages/moneys/money/component/point-log.component.ts b/src/app/pages/moneys/money/component/point-log.component.ts
index c8f9df7..4aded51 100644
--- a/src/app/pages/moneys/money/component/point-log.component.ts
+++ b/src/app/pages/moneys/money/component/point-log.component.ts
@@ -1,12 +1,71 @@
-import { Component, OnInit } from '@angular/core';
+import {
+  Component,
+  ElementRef,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+  ViewEncapsulation,
+  AfterViewInit
+} from '@angular/core';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+
+import { fromEvent, Subject } from 'rxjs';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+
+import { fuseAnimations } from 'src/@fuse/animations';
 
 @Component({
-  selector: 'app-point-log',
+  selector: 'app-point-log-list',
   templateUrl: './point-log.component.html',
-  styleUrls: ['./point-log.component.scss']
+  styleUrls: ['./point-log.component.scss'],
+  animations: fuseAnimations,
+  encapsulation: ViewEncapsulation.None
 })
-export class PointLogComponent implements OnInit {
-  constructor() {}
+export class PointLogComponent implements OnInit, OnDestroy, AfterViewInit {
+  displayedColumns = [
+    'idx',
+    'title',
+    'contents',
+    'register',
+    'createdAt',
+    'contactStatus'
+  ];
 
+  @ViewChild(MatPaginator, { static: true })
+  paginator: MatPaginator;
+
+  @ViewChild('filter', { static: true })
+  filter: ElementRef;
+
+  @ViewChild(MatSort, { static: true })
+  sort: MatSort;
+
+  // Private
+  private _unsubscribeAll: Subject<any>;
+
+  constructor() {
+    // Set the private defaults
+    this._unsubscribeAll = new Subject();
+  }
+
+  // -----------------------------------------------------------------------------------------------------
+  // @ Lifecycle hooks
+  // -----------------------------------------------------------------------------------------------------
+
+  /**
+   * On init
+   */
   ngOnInit() {}
+
+  /**
+   * On destroy
+   */
+  ngOnDestroy(): void {
+    // Unsubscribe from all subscriptions
+    this._unsubscribeAll.next();
+    this._unsubscribeAll.complete();
+  }
+
+  ngAfterViewInit(): void {}
 }
diff --git a/src/app/pages/moneys/money/component/withdrawal.component.html b/src/app/pages/moneys/money/component/withdrawal.component.html
index de0439f..52518f7 100644
--- a/src/app/pages/moneys/money/component/withdrawal.component.html
+++ b/src/app/pages/moneys/money/component/withdrawal.component.html
@@ -1 +1,167 @@
-<p>withdrawal works!</p>
+<div id="withdrawal-list" class="page-layout carded fullwidth inner-scroll">
+  <!-- TOP BACKGROUND -->
+  <div class="top-bg accent"></div>
+  <!-- / TOP BACKGROUND -->
+
+  <!-- CENTER -->
+  <div class="center">
+    <!-- HEADER -->
+    <div
+      class="header accent"
+      fxLayout="column"
+      fxLayoutAlign="center center"
+      fxLayout.gt-xs="row"
+      fxLayoutAlign.gt-xs="space-between center"
+    >
+      <!-- APP TITLE -->
+      <div
+        class="logo mb-24 mb-sm-0"
+        fxLayout="row"
+        fxLayoutAlign="start center"
+      >
+        <mat-icon
+          class="logo-icon s-32 mr-16"
+          [@animate]="{ value: '*', params: { delay: '50ms', scale: '0.2' } }"
+        >
+          shopping_basket
+        </mat-icon>
+        <span
+          class="logo-text h1"
+          [@animate]="{ value: '*', params: { delay: '100ms', x: '-25px' } }"
+          >고객센터 관리</span
+        >
+      </div>
+      <!-- / APP TITLE -->
+
+      <!-- SEARCH -->
+
+      <!-- <div class="search-wrapper  ml-sm-32">
+        <div class="search" fxFlex fxLayout="row" fxLayoutAlign="start center">
+          <mat-icon>search</mat-icon>
+          <input #filter placeholder="Search for an order" />
+        </div>
+      </div> -->
+      <!-- / SEARCH -->
+    </div>
+
+    <!-- / HEADER -->
+
+    <!-- CONTENT CARD -->
+    <div class="content-card">
+      <mat-table
+        class="service-center"
+        #table
+        [dataSource]="dataSource"
+        matSort
+        [@animateStagger]="{ value: '50' }"
+        fusePerfectScrollbar
+      >
+        <ng-container matColumnDef="idx">
+          <mat-header-cell *matHeaderCellDef mat-sort-header
+            >번호</mat-header-cell
+          >
+          <mat-cell *matCellDef="let serviceCenter; let i = index">
+            <p class="text-truncate">{{ i }}</p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- ID/Nickname Column -->
+        <ng-container matColumnDef="title">
+          <mat-header-cell *matHeaderCellDef mat-sort-header
+            >제목</mat-header-cell
+          >
+          <mat-cell *matCellDef="let serviceCenter">
+            <p class="text-truncate">{{ serviceCenter.title }}</p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Phone Column -->
+        <ng-container matColumnDef="contents">
+          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm
+            >내용</mat-header-cell
+          >
+          <mat-cell *matCellDef="let serviceCenter" fxHide fxShow.gt-sm>
+            <!-- <p class="text-truncate">{{ serviceCenter.contents }}</p> -->
+            <p class="text-truncate">010-3004-2001</p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Total Price Column -->
+        <ng-container matColumnDef="register">
+          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-md
+            >작성자</mat-header-cell
+          >
+          <mat-cell *matCellDef="let serviceCenter" fxHide fxShow.gt-md>
+            <p class="total-price text-truncate">
+              <!-- {{ user.totalprice | currency: 'USD':'symbol' }} -->
+              1,000,000
+            </p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Point Column -->
+        <ng-container matColumnDef="createdAt">
+          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm
+            >작성일</mat-header-cell
+          >
+          <mat-cell *matCellDef="let serviceCenter" fxHide fxShow.gt-sm>
+            <p class="text-truncate">
+              <!-- {{ user.point }} -->
+              5000
+            </p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Level Column -->
+        <ng-container matColumnDef="contactStatus">
+          <mat-header-cell *matHeaderCellDef mat-sort-header
+            >문의상태</mat-header-cell
+          >
+          <mat-cell *matCellDef="let serviceCenter">
+            <!-- <p class="status text-truncate h6 p-4" [ngClass]="order.status[0].color"> -->
+            <p class="text-truncate">
+              <!-- {{ user.level }} -->
+              브론즈
+            </p>
+          </mat-cell>
+        </ng-container>
+
+        <!-- Charge Money Column -->
+        <ng-container matColumnDef="removeBtn">
+          <mat-header-cell *matHeaderCellDef mat-sort-header
+            >삭제버튼</mat-header-cell
+          >
+          <mat-cell *matCellDef="let user">
+            <p class="text-truncate ">
+              <button mat-raised-button class="mat-accent">
+                삭제
+              </button>
+            </p>
+          </mat-cell>
+        </ng-container>
+
+        <mat-header-row
+          *matHeaderRowDef="displayedColumns; sticky: true"
+        ></mat-header-row>
+
+        <mat-row
+          *matRowDef="let user; columns: displayedColumns"
+          class="user"
+          matRipple
+          [routerLink]="'/pages/users/management/list/' + user.id"
+        >
+        </mat-row>
+      </mat-table>
+
+      <mat-paginator
+        #paginator
+        [pageIndex]="0"
+        [pageSize]="10"
+        [pageSizeOptions]="[5, 10, 25, 100]"
+      >
+      </mat-paginator>
+    </div>
+    <!-- / CONTENT CARD -->
+  </div>
+  <!-- / CENTER -->
+</div>
diff --git a/src/app/pages/moneys/money/component/withdrawal.component.scss b/src/app/pages/moneys/money/component/withdrawal.component.scss
index e69de29..4f387f3 100644
--- a/src/app/pages/moneys/money/component/withdrawal.component.scss
+++ b/src/app/pages/moneys/money/component/withdrawal.component.scss
@@ -0,0 +1,117 @@
+@import 'src/@fuse/scss/fuse';
+
+app-withdrawal-list {
+  #withdrawal-list {
+    .top-bg {
+      @include media-breakpoint('xs') {
+        height: 224px;
+      }
+    }
+
+    > .center {
+      > .header {
+        .search-wrapper {
+          width: 100%;
+          max-width: 480px;
+          border-radius: 28px;
+          overflow: hidden;
+          @include mat-elevation(1);
+
+          @include media-breakpoint('xs') {
+            width: 100%;
+          }
+
+          .search {
+            width: 100%;
+            height: 48px;
+            line-height: 48px;
+            padding: 0 18px;
+
+            input {
+              width: 100%;
+              height: 48px;
+              min-height: 48px;
+              max-height: 48px;
+              padding: 0 16px;
+              border: none;
+              outline: none;
+            }
+          }
+        }
+
+        @include media-breakpoint('xs') {
+          padding: 8px 0;
+          height: 160px !important;
+          min-height: 160px !important;
+          max-height: 160px !important;
+        }
+      }
+    }
+  }
+
+  .mat-tab-group,
+  .mat-tab-body-wrapper,
+  .tab-content {
+    flex: 1 1 auto;
+    max-width: 100%;
+  }
+
+  .service-center-table {
+    flex: 1 1 auto;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+
+    .mat-header-row {
+      min-height: 64px;
+    }
+
+    .user {
+      position: relative;
+      cursor: pointer;
+      height: 84px;
+    }
+
+    .mat-cell {
+      min-width: 0;
+      display: flex;
+      align-items: center;
+    }
+
+    .mat-column-id {
+      flex: 0 1 84px;
+    }
+
+    .mat-column-image {
+      flex: 0 1 84px;
+
+      .product-image {
+        width: 52px;
+        height: 52px;
+        border: 1px solid rgba(0, 0, 0, 0.12);
+      }
+    }
+
+    .mat-column-buttons {
+      flex: 0 1 80px;
+    }
+
+    .quantity-indicator {
+      display: inline-block;
+      vertical-align: middle;
+      width: 8px;
+      height: 8px;
+      border-radius: 4px;
+      margin-right: 8px;
+
+      & + span {
+        display: inline-block;
+        vertical-align: middle;
+      }
+    }
+
+    .active-icon {
+      border-radius: 50%;
+    }
+  }
+}
diff --git a/src/app/pages/moneys/money/component/withdrawal.component.ts b/src/app/pages/moneys/money/component/withdrawal.component.ts
index 4ac0113..7941406 100644
--- a/src/app/pages/moneys/money/component/withdrawal.component.ts
+++ b/src/app/pages/moneys/money/component/withdrawal.component.ts
@@ -1,12 +1,71 @@
-import { Component, OnInit } from '@angular/core';
+import {
+  Component,
+  ElementRef,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+  ViewEncapsulation,
+  AfterViewInit
+} from '@angular/core';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+
+import { fromEvent, Subject } from 'rxjs';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+
+import { fuseAnimations } from 'src/@fuse/animations';
 
 @Component({
-  selector: 'app-withdrawal',
+  selector: 'app-withdrawal-list',
   templateUrl: './withdrawal.component.html',
-  styleUrls: ['./withdrawal.component.scss']
+  styleUrls: ['./withdrawal.component.scss'],
+  animations: fuseAnimations,
+  encapsulation: ViewEncapsulation.None
 })
-export class WithdrawalComponent implements OnInit {
-  constructor() {}
+export class WithdrawalComponent implements OnInit, OnDestroy, AfterViewInit {
+  displayedColumns = [
+    'idx',
+    'title',
+    'contents',
+    'register',
+    'createdAt',
+    'contactStatus'
+  ];
 
+  @ViewChild(MatPaginator, { static: true })
+  paginator: MatPaginator;
+
+  @ViewChild('filter', { static: true })
+  filter: ElementRef;
+
+  @ViewChild(MatSort, { static: true })
+  sort: MatSort;
+
+  // Private
+  private _unsubscribeAll: Subject<any>;
+
+  constructor() {
+    // Set the private defaults
+    this._unsubscribeAll = new Subject();
+  }
+
+  // -----------------------------------------------------------------------------------------------------
+  // @ Lifecycle hooks
+  // -----------------------------------------------------------------------------------------------------
+
+  /**
+   * On init
+   */
   ngOnInit() {}
+
+  /**
+   * On destroy
+   */
+  ngOnDestroy(): void {
+    // Unsubscribe from all subscriptions
+    this._unsubscribeAll.next();
+    this._unsubscribeAll.complete();
+  }
+
+  ngAfterViewInit(): void {}
 }