충전내역 테이블

src/app/modules/admin/member/user/components/deposit-history.component.html

@@ -7,10 +7,101 @@
           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">
-            검색
+            <div fxLayout="row wrap" class="items-center mt-6 sm:mt-0 sm:ml-0">
+              <!-- Search -->
+              <!-- Card inception -->
+              <mat-form-field
+                [floatLabel]="'always'"
+                class="bet-mat-form-field-wrapper-mb-0 mr-2"
+              >
+                <input
+                  matInput
+                  [matDatepicker]="picker1"
+                  [placeholder]="'Choose a date'"
+                />
+                <mat-datepicker-toggle matSuffix [for]="picker1">
+                </mat-datepicker-toggle>
+                <mat-datepicker #picker1></mat-datepicker>
+              </mat-form-field>
+              <!-- Card expiration -->
+              <mat-form-field
+                [floatLabel]="'always'"
+                class="bet-mat-form-field-wrapper-mb-0 mr-2"
+              >
+                <input
+                  matInput
+                  [matDatepicker]="picker2"
+                  [placeholder]="'Choose a date'"
+                />
+                <mat-datepicker-toggle
+                  matSuffix
+                  [for]="picker2"
+                ></mat-datepicker-toggle>
+                <mat-datepicker #picker2></mat-datepicker>
+              </mat-form-field>
+
+              <!-- Add user button -->
+              <button
+                fxFlex
+                mat-flat-button
+                [color]="'primary'"
+                (click)="__createProduct()"
+              >
+                <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
+                <span class="ml-2 mr-1">Search</span>
+              </button>
             </div>
-          <div class="flex flex-col flex-auto mt-2 overflow-x-auto">
-            입금정보 테이블
+          </div>
+          <div class="flex flex-col flex-auto mt-2">
+            <table
+              class="overflow-y-visible"
+              mat-table
+              [dataSource]="depositHistoryDataSource"
+            >
+              <!-- Total -->
+              <ng-container matColumnDef="no">
+                <th mat-header-cell *matHeaderCellDef>번호</th>
+                <td mat-cell *matCellDef="let info; let idx = index">
+                  <span class="font-medium text-right">
+                    {{ idx + 1 }}
+                  </span>
+                </td>
+              </ng-container>
+
+              <!-- Expenses amount -->
+              <ng-container matColumnDef="amount">
+                <th mat-header-cell *matHeaderCellDef>충전금액</th>
+                <td mat-cell *matCellDef="let info">{{ info.amount }}</td>
+              </ng-container>
+
+              <!-- Expenses amount -->
+              <ng-container matColumnDef="createAt">
+                <th mat-header-cell *matHeaderCellDef>신청일자</th>
+                <td mat-cell *matCellDef="let info">
+                  {{ info.createAt }}
+                </td>
+              </ng-container>
+
+              <ng-container matColumnDef="state">
+                <th mat-header-cell *matHeaderCellDef>결과</th>
+                <td mat-cell *matCellDef="let info">
+                  {{ info.state }}
+                </td>
+              </ng-container>
+
+              <tr
+                mat-header-row
+                *matHeaderRowDef="depositHistoryTableColumns"
+              ></tr>
+              <tr
+                mat-row
+                *matRowDef="let row; columns: depositHistoryTableColumns"
+              ></tr>
+            </table>
+            <mat-paginator
+              [pageSizeOptions]="[5, 10, 25, 100]"
+              aria-label="Select page of users"
+            ></mat-paginator>
           </div>
         </div>
       </div>

src/app/modules/admin/member/user/components/deposit-history.component.ts

@@ -9,6 +9,7 @@ import {
   ViewEncapsulation,
 } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
+import { MatTableDataSource } from '@angular/material/table';
 import { fuseAnimations } from '@fuse/animations';
 import { Subject } from 'rxjs';
 
@@ -46,10 +47,17 @@ export class DepositHistoryComponent
 
   private _unsubscribeAll: Subject<any> = new Subject<any>();
 
+  depositHistoryTableColumns: string[] = ['no', 'amount', 'createAt', 'state'];
+
+  depositHistoryDataSource: MatTableDataSource<TempDeposit> =
+    new MatTableDataSource();
+
   /**
    * Constructor
    */
-  constructor(private _changeDetectorRef: ChangeDetectorRef) {}
+  constructor(private _changeDetectorRef: ChangeDetectorRef) {
+    this.depositHistoryDataSource.data = DEPOSIT_HISTORY_DATA;
+  }
 
   // -----------------------------------------------------------------------------------------------------
   // @ Lifecycle hooks
@@ -104,3 +112,20 @@ export class DepositHistoryComponent
     return item.id || index;
   }
 }
+
+export interface TempDeposit {
+  amount: string;
+  createAt: string;
+  state: string;
+}
+
+const DEPOSIT_HISTORY_DATA: TempDeposit[] = [
+  { amount: '100,000', createAt: '2022-08-20 12:40', state: '완료' },
+  { amount: '100,000', createAt: '2022-08-20 12:40', state: '완료' },
+  { amount: '100,000', createAt: '2022-08-20 12:40', state: '완료' },
+  { amount: '100,000', createAt: '2022-08-20 12:40', state: '완료' },
+  { amount: '100,000', createAt: '2022-08-20 12:40', state: '완료' },
+  { amount: '100,000', createAt: '2022-08-20 12:40', state: '완료' },
+  { amount: '100,000', createAt: '2022-08-20 12:40', state: '완료' },
+  { amount: '100,000', createAt: '2022-08-20 12:40', state: '완료' },
+];

src/app/modules/admin/member/user/user.module.ts

@@ -23,6 +23,7 @@ import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatMomentDateModule } from '@angular/material-moment-adapter';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatTableModule } from '@angular/material/table';
 
 import { FuseCardModule } from '@fuse/components/card';
 import { FuseAlertModule } from '@fuse/components/alert';
@@ -65,6 +66,7 @@ import { userRoutes } from 'app/modules/admin/member/user/user.routing';
     MatMomentDateModule,
     MatTabsModule,
     MatSidenavModule,
+    MatTableModule,
 
     FuseCardModule,
     FuseAlertModule,