From 938cc0a212639686f821559f046691d6509cdbea Mon Sep 17 00:00:00 2001
From: Park Byung Eun <geekdev@naver.com>
Date: Fri, 5 Aug 2022 07:50:19 +0000
Subject: [PATCH] =?UTF-8?q?=EC=97=90=EB=B3=BC=EB=A3=A8=EC=85=98=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/mock-api/apps/game/evolution/api.ts   |   2 +-
 src/app/mock-api/apps/game/evolution/data.ts  | 182 ++++++++
 src/app/mock-api/apps/game/slot/data.ts       |  12 +-
 .../evolution/components/list.component.html  | 390 +++++++++++-------
 .../evolution/components/list.component.ts    |  11 +-
 .../admin/game/evolution/evolution.module.ts  |   4 +
 .../admin/game/evolution/models/evolution.ts  |  73 ++--
 .../game/slot/components/list.component.html  |   7 +-
 .../modules/admin/game/slot/models/slot.ts    |   6 +-
 src/styles/styles.scss                        |   6 +-
 10 files changed, 484 insertions(+), 209 deletions(-)

diff --git a/src/app/mock-api/apps/game/evolution/api.ts b/src/app/mock-api/apps/game/evolution/api.ts
index 6e1b1cb..6522ea9 100644
--- a/src/app/mock-api/apps/game/evolution/api.ts
+++ b/src/app/mock-api/apps/game/evolution/api.ts
@@ -42,7 +42,7 @@ export class GameEvolutionMockApi {
         let evolutions: any[] | null = cloneDeep(this._evolutions);
 
         // Sort the evolutions
-        if (sort === 'signinId' || sort === 'nickname' || sort === 'gameId') {
+        if (sort === 'signinId') {
           evolutions.sort((a, b) => {
             const fieldA = a[sort].toString().toUpperCase();
             const fieldB = b[sort].toString().toUpperCase();
diff --git a/src/app/mock-api/apps/game/evolution/data.ts b/src/app/mock-api/apps/game/evolution/data.ts
index bfba3ac..079fb3d 100644
--- a/src/app/mock-api/apps/game/evolution/data.ts
+++ b/src/app/mock-api/apps/game/evolution/data.ts
@@ -1,6 +1,188 @@
 /* eslint-disable */
 
 export const evolutions = [
+  {
+    id: '7eb7c859-1347-4317-96b6-9476a7e2ba3c',
+    signinId: 'aa200',
+    highRank: '[매장]kgon5',
+    gameId: 'ks1_1007',
+    nickname: 'aa200',
+    vendorName: '에볼류션 카지노',
+    gameName: '스타라이트 프린세스',
+    bettingId: '62acfwdcmdkei911dkd81221fb',
+    betStatus: '베팅',
+    betBeforeMoney: '77,831',
+    betWinMoney: '0',
+    betProfitLossMoney: '-8,000',
+    totalMoney: '69,831',
+    betMoney: '8,000',
+    betAfterMoney: '69,831',
+    comp: 'Y',
+    betHistorys: [
+      {
+        pickBetType: 'Player',
+        betMoney: '2,000',
+        betWinMoney: '0',
+      },
+      {
+        pickBetType: 'Player_Lighting',
+        betMoney: '400',
+        betWinMoney: '0',
+      },
+    ],
+    mainInfo: {
+      name: 'kgon1',
+      commissionRate: '2.80%',
+      point: '22.40P',
+    },
+    branchInfo: {
+      name: 'kgon2',
+      commissionRate: '0.20%',
+      point: '1.60P',
+    },
+    divisionInfo: {
+      name: 'kgon3',
+      commissionRate: '0.20%',
+      point: '1.60P',
+    },
+    officeInfo: {
+      name: 'kgon4',
+      commissionRate: '0.30%',
+      point: '2.40P',
+    },
+    storeInfo: {
+      name: 'kgon5',
+      commissionRate: '1.50',
+      point: '12.00P',
+    },
+    memberInfo: {
+      name: 'aa100',
+      commissionRate: '0.70',
+      point: '56.00P',
+    },
+    bettingRegistDate: '2022-06-20 11:43:37',
+    registrationDate: '2022-06-20 11:43:37',
+  },
+  {
+    id: '7eb7c859-1347-4337-96b6-9476a7e2ba3c',
+    signinId: 'aa200',
+    highRank: '[매장]kgon5',
+    gameId: 'ks1_1007',
+    nickname: 'aa200',
+    vendorName: '에볼류션 카지노',
+    gameName: '스타라이트 프린세스',
+    bettingId: '62acfwdcmdkei911dkd81221fb',
+    betStatus: '베팅',
+    betBeforeMoney: '82,831',
+    betWinMoney: '0',
+    betProfitLossMoney: '-5,000',
+    totalMoney: '77,831',
+    betMoney: '5,000',
+    betAfterMoney: '77,831',
+    comp: 'Y',
+    betHistorys: [
+      {
+        pickBetType: 'Player',
+        betMoney: '2,000',
+        betWinMoney: '0',
+      },
+      {
+        pickBetType: 'Player_Lighting',
+        betMoney: '400',
+        betWinMoney: '0',
+      },
+    ],
+    mainInfo: {
+      name: 'kgon1',
+      commissionRate: '2.80%',
+      point: '22.40P',
+    },
+    branchInfo: {
+      name: 'kgon2',
+      commissionRate: '0.20%',
+      point: '1.60P',
+    },
+    divisionInfo: {
+      name: 'kgon3',
+      commissionRate: '0.20%',
+      point: '1.60P',
+    },
+    officeInfo: {
+      name: 'kgon4',
+      commissionRate: '0.30%',
+      point: '2.40P',
+    },
+    storeInfo: {
+      name: 'kgon5',
+      commissionRate: '1.50',
+      point: '12.00P',
+    },
+    memberInfo: {
+      name: 'aa100',
+      commissionRate: '0.70',
+      point: '35.00P',
+    },
+    bettingRegistDate: '2022-06-20 11:43:37',
+    registrationDate: '2022-06-20 11:43:37',
+  },
+  {
+    id: '7eb7c859-1347-4327-96b6-9476a7e2ba3c',
+    signinId: 'aa200',
+    highRank: '[매장]kgon5',
+    gameId: 'ks1_1007',
+    nickname: 'aa200',
+    vendorName: '에볼류션 카지노',
+    gameName: '스타라이트 프린세스',
+    bettingId: '62acfwdcmdkei911dkd81221fb',
+    betStatus: '베팅',
+    betBeforeMoney: '80,931',
+    betWinMoney: '3,900',
+    betProfitLossMoney: '1,900',
+    totalMoney: '82,831',
+    betMoney: '2,000',
+    betAfterMoney: '78,931',
+    comp: 'Y',
+    betHistorys: [
+      {
+        pickBetType: 'Player',
+        betMoney: '2,000',
+        betWinMoney: '0',
+      },
+      {
+        pickBetType: 'Player_Lighting',
+        betMoney: '400',
+        betWinMoney: '0',
+      },
+    ],
+    mainInfo: {
+      name: 'kgon1',
+      commissionRate: '2.80%',
+      point: '22.40P',
+    },
+    branchInfo: {
+      name: 'kgon2',
+      commissionRate: '0.20%',
+      point: '1.60P',
+    },
+    divisionInfo: {
+      name: 'kgon3',
+      commissionRate: '0.20%',
+      point: '1.60P',
+    },
+    officeInfo: {
+      name: 'kgon4',
+      commissionRate: '0.30%',
+      point: '2.40P',
+    },
+    storeInfo: {
+      name: 'kgon5',
+      commissionRate: '1.50',
+      point: '12.00P',
+    },
+    bettingRegistDate: '2022-06-20 11:43:37',
+    registrationDate: '2022-06-20 11:43:37',
+  },
+
   {
     id: '7eb7c859-1347-4317-96b6-9476a7e2ba3c',
     signinId: 'aa100',
diff --git a/src/app/mock-api/apps/game/slot/data.ts b/src/app/mock-api/apps/game/slot/data.ts
index 19fd0f4..9bffc3b 100644
--- a/src/app/mock-api/apps/game/slot/data.ts
+++ b/src/app/mock-api/apps/game/slot/data.ts
@@ -11,8 +11,8 @@ export const slots = [
     gameName: '스타라이트 프린세스',
     bettingId: '62acfwdcmdkei911dkd81221fb',
     betStatus: '베팅',
-    betPrevMoney: '187,730',
-    bettingMoney: '1,000',
+    betBeforeMoney: '187,730',
+    betMoney: '1,000',
     betAfterMoney: '186,930',
     comp: 'Y',
     mainInfo: {
@@ -53,8 +53,8 @@ export const slots = [
     gameName: '스타라이트 프린세스',
     bettingId: '62acfwdcmdkei911dkd81221fb',
     betStatus: '베팅',
-    betPrevMoney: '187,730',
-    bettingMoney: '1,000',
+    betBeforeMoney: '187,730',
+    betMoney: '1,000',
     betAfterMoney: '186,930',
     comp: 'Y',
     mainInfo: {
@@ -95,8 +95,8 @@ export const slots = [
     gameName: '스타라이트 프린세스',
     bettingId: '62acfwdcmdkei911dkd81221fb',
     betStatus: '베팅',
-    betPrevMoney: '187,730',
-    bettingMoney: '1,000',
+    betBeforeMoney: '187,730',
+    betMoney: '1,000',
     betAfterMoney: '186,930',
     comp: 'Y',
     mainInfo: {
diff --git a/src/app/modules/admin/game/evolution/components/list.component.html b/src/app/modules/admin/game/evolution/components/list.component.html
index ad89d92..3e3e8d2 100644
--- a/src/app/modules/admin/game/evolution/components/list.component.html
+++ b/src/app/modules/admin/game/evolution/components/list.component.html
@@ -10,54 +10,49 @@
       <mat-progress-bar [mode]="'indeterminate'"></mat-progress-bar>
     </div>
     <!-- Title -->
-    <div class="text-4xl font-extrabold tracking-tight">에볼루션배팅리스트</div>
+    <div class="text-4xl font-extrabold tracking-tight">에볼루션베팅리스트</div>
+    <!-- 슬롯 게임 요약 정보 -->
+    <div
+      class="relative flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between py-4 px-6 md:px-8 border-b"
+    ></div>
+
     <!-- Actions -->
     <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
       <!-- Search -->
-      <div>
-        <span style="color: blue">2022-01-01 00:00</span><span>~</span>
-        <span style="color: blue">2022-06-21 23:59</span>
-        <span
-          >까지의 총 유효배팅:<span style="color: red">12,440,000</span>원</span
-        >&nbsp;&nbsp;
-        <span>배팅금액:<span style="color: red">12,751,000</span>원</span
-        >&nbsp;&nbsp;
-        <span>당첨:<span style="color: red">12,199,950</span>원</span
-        >&nbsp;&nbsp;
-        <span>취소:<span style="color: red">10,000</span>원</span>&nbsp;&nbsp;
-        <span>배팅-당첨-취소:<span style="color: red">542,050</span>원</span
-        >&nbsp;&nbsp;
-        <span>본사롤링:<span style="color: red">60,202</span>원</span
-        >&nbsp;&nbsp;
-        <span>대본롤링:<span style="color: red">36,390</span>원</span
-        >&nbsp;&nbsp;
-        <span>부본롤링:<span style="color: red">24,828</span>원</span
-        >&nbsp;&nbsp;
-        <span>총판롤링:<span style="color: red">24,752</span>원</span
-        >&nbsp;&nbsp;
-        <span>매장롤링:<span style="color: red">13,451</span>원</span
-        >&nbsp;&nbsp;
-        <span>회원롤링:<span style="color: red">81,037</span>원</span
-        >&nbsp;&nbsp;
-        <span>롤링합계:<span style="color: red">240,660</span>원</span>
-      </div>
       <button mat-icon-button (click)="__onClickSearch()">
         <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
       </button>
     </div>
   </div>
 
-  <!-- Memo -->
   <div
     class="relative flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between py-4 px-6 md:px-8 border-b"
+    style="font-size: small"
   >
-    <!-- <mat-form-field
-      class="bet-mat-form-field-wrapper-mb-0 mr-2"
-      style="width: 100%"
-    >
-      <textarea matInput cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
-    </mat-form-field>
-    <button mat-flat-button [color]="'primary'">메모저장</button> -->
+    <div class="flex items-center justify-center px-6 py-4 space-x-3">
+      <div class="grid grid-cols-2 gap-x-4 gap-y-1">
+        <div class="font-medium tracking-tight text-secondary">기간</div>
+        <div class="font-medium" style="color: blue">
+          2022-06-01 00:00 ~ 2022-06-21 23:59 까지
+        </div>
+        <div class="font-medium tracking-tight text-secondary">
+          총 유효배팅 | 배팅금액
+        </div>
+        <div class="font-medium" style="color: red">816,335원 | 816,335원</div>
+        <div class="font-medium tracking-tight text-secondary">
+          당첨 | 취소 | 배팅-당첨-취소
+        </div>
+        <div class="font-medium" style="color: red">717,335원 | 0원 98,847</div>
+        <div class="font-medium tracking-tight text-secondary">
+          본사롤링 | 대본롤링 | 부본롤링 | 총판 롤링 | 매장롤링 | 회원롤링
+        </div>
+        <div class="font-medium" style="color: red">
+          6,335원 | 1,663원 | 1,633원 | 2,304원 | 5,544원 | 6,119원
+        </div>
+        <div class="font-medium tracking-tight text-secondary">롤링합계</div>
+        <div class="font-medium">3,9041원</div>
+      </div>
+    </div>
   </div>
 
   <!-- Search -->
@@ -68,52 +63,87 @@
     <!-- Actions -->
     <div fxLayout="row wrap" class="items-center mt-6 sm:mt-0 sm:ml-0">
       <!-- SelectBox -->
-      <mat-form-field fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
-        <mat-select placeholder="전체">
-          <mat-option value="">전체</mat-option>
-          <mat-option value="">배팅100만미만</mat-option>
-          <mat-option value="">배팅100-300만</mat-option>
-          <mat-option value="">배팅300-500만</mat-option>
-          <mat-option value="">배팅500만이상</mat-option>
-          <mat-option value="">당첨1000만초과</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
-        <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>
-      <!-- Search -->
-      <mat-form-field
-        fxFlex
-        class="fuse-mat-rounded min-w-64 bet-mat-form-field-wrapper-mb-0 mr-2"
-      >
-        <mat-icon
-          class="icon-size-5"
-          matPrefix
-          [svgIcon]="'heroicons_solid:search'"
-        ></mat-icon>
-        <input
-          matInput
-          [formControl]="searchInputControl"
-          [autocomplete]="'off'"
-          [placeholder]="'Search user'"
-        />
-      </mat-form-field>
-      <!-- Add user button -->
-      <button
-        fxFlex
-        mat-flat-button
-        style="position: fixed; margin-top: 4px"
-        [color]="'primary'"
-        (click)="__createProduct()"
-      >
-        <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
-        <span class="ml-2 mr-1">Search</span>
-      </button>
+      <div fxLayout="row wrap" class="items-center mt-6 sm:mt-0 sm:ml-0">
+        <!-- SelectBox -->
+        <mat-form-field fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
+          <mat-select placeholder="전체">
+            <mat-option value="">전체</mat-option>
+            <mat-option value="">배팅100만미만</mat-option>
+            <mat-option value="">배팅100-300만</mat-option>
+            <mat-option value="">배팅300-500만</mat-option>
+            <mat-option value="">배팅500만이상</mat-option>
+            <mat-option value="">당첨1000만초과</mat-option>
+          </mat-select>
+        </mat-form-field>
+
+        <mat-form-field
+          class="bet-mat-form-field-wrapper-mb-0 mr-2"
+          [floatLabel]="'always'"
+        >
+          <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>
+        <mat-form-field
+          class="bet-mat-form-field-wrapper-mb-0 mr-2"
+          [floatLabel]="'always'"
+        >
+          <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>
+
+        <mat-form-field fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
+          <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>
+        <!-- Search -->
+        <mat-form-field
+          fxFlex
+          class="fuse-mat-rounded min-w-64 bet-mat-form-field-wrapper-mb-0 mr-2"
+        >
+          <mat-icon
+            class="icon-size-5"
+            matPrefix
+            [svgIcon]="'heroicons_solid:search'"
+          ></mat-icon>
+          <input
+            matInput
+            [formControl]="searchInputControl"
+            [autocomplete]="'off'"
+            [placeholder]="'Search user'"
+          />
+        </mat-form-field>
+        <!-- Add user button -->
+        <button
+          fxFlex
+          mat-flat-button
+          style="position: fixed; margin-top: 4px"
+          [color]="'primary'"
+          (click)="__createProduct()"
+        >
+          <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
+          <span class="ml-2 mr-1">Search</span>
+        </button>
+      </div>
     </div>
   </div>
 
@@ -124,22 +154,49 @@
       class="flex flex-col flex-auto sm:mb-18 overflow-hidden sm:overflow-y-auto"
     >
       <ng-container *ngIf="evolutions$ | async as evolutions">
-        <ng-container *ngIf="evolutions.length > 0; else noEvolution">
+        <ng-container *ngIf="evolutions.length > 0; else noUser">
           <div class="grid">
             <!-- Header -->
             <div
               class="evolution-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"
             >
-              <div>상부</div>
-              <div>유저</div>
-              <div>게임</div>
-              <div class="hidden sm:block">금액</div>
-              <div class="hidden sm:block">최종금액</div>
-              <div class="hidden md:block">배팅</div>
-              <div class="hidden md:block">데이터</div>
-              <div class="hidden md:block">콤프</div>
-              <div class="hidden lg:block">롤링</div>
-              <div class="hidden lg:block">
+              <div class="hidden lg:block" style="font-size: x-small">상위</div>
+              <div class="hidden lg:block" style="font-size: x-small">
+                게임코드ID
+                <hr style="margin: 7px 0px" />
+                사이트ID
+                <hr style="margin: 7px 0px" />
+                닉네임
+              </div>
+              <div class="hidden lg:block" style="font-size: x-small">
+                게임사이름
+                <hr style="margin: 7px 0px" />
+                게임 이름
+                <hr style="margin: 7px 0px" />
+                배팅고유코드
+              </div>
+              <div class="hidden lg:block" style="font-size: x-small">
+                배팅
+                <hr style="margin: 7px 0px" />
+                당첨
+                <hr style="margin: 7px 0px" />
+                손익
+              </div>
+              <div class="hidden lg:block" style="font-size: x-small">
+                배팅 전
+                <hr style="margin: 7px 0px" />
+                배팅 후
+                <hr style="margin: 7px 0px" />
+                최종금액
+              </div>
+              <div class="hidden lg:block" style="font-size: x-small">베팅</div>
+              <div class="hidden lg:block" style="font-size: x-small">
+                데이터
+                <hr style="margin: 7px 0px" />
+                콤프
+              </div>
+              <div class="hidden lg:block" style="font-size: x-small">롤링</div>
+              <div class="hidden lg:block" style="font-size: x-small">
                 배팅시간
                 <hr style="margin: 7px 0px" />
                 등록시간
@@ -148,90 +205,105 @@
             <!-- Rows -->
             <ng-container *ngIf="evolutions$ | async as evolutions">
               <ng-container
-                *ngFor="let evolution of evolutions; trackBy: __trackByFn"
+                *ngFor="let info of evolutions; trackBy: __trackByFn"
               >
                 <div
                   class="evolution-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
+                  style="font-size: x-small"
                 >
-                  <div>{{ evolution.highRank }}</div>
-                  <div>
-                    게임ID{{ evolution.gameId }}
+                  <div class="hidden lg:block">
+                    {{ info.highRank }}
+                  </div>
+                  <div class="hidden lg:block">
+                    {{ info.gameId }}
                     <hr style="margin: 7px 0px" />
-                    사이트ID{{ evolution.signinId }}
+                    {{ info.signinId }}
                     <hr style="margin: 7px 0px" />
-                    닉네임{{ evolution.nickname }}
+                    {{ info.nickname }}
+                  </div>
+                  <div class="hidden lg:block">
+                    {{ info.vendorName }}
+                    <hr style="margin: 7px 0px" />
+                    {{ info.gameName }}
+                    <hr style="margin: 7px 0px" />
+                    {{ info.bettingId }}
+                  </div>
+                  <div class="hidden lg:block">
+                    {{ info.betMoney }}
+                    <hr style="margin: 7px 0px" />
+                    {{ info.betWinMoney }}
+                    <hr style="margin: 7px 0px" />
+                    {{ info.betProfitLossMoney }}
+                  </div>
+                  <div class="hidden lg:block">
+                    {{ info.betBeforeMoney }}
+                    <hr style="margin: 7px 0px" />
+                    {{ info.betAfterMoney }}
+                    <hr style="margin: 7px 0px" />
+                    {{ info.totalMoney }}
                   </div>
                   <div>
-                    {{ evolution.gameName }}
-                    <hr style="margin: 7px 0px" />
-                    {{ evolution.gameInfo1 }}
-                    <hr style="margin: 7px 0px" />
-                    {{ evolution.gameInfo2 }}
-                    <hr style="margin: 7px 0px" />
-                    {{ evolution.gameInfo3 }}
+                    <div
+                      *ngFor="let betHistory of info.betHistorys"
+                      style="display: flex; flex-wrap: wrap; padding-left: 0"
+                    >
+                      <span style="flex: 0 0 33.33%">{{
+                        betHistory.pickBetType
+                      }}</span>
+                      <span style="flex: 0 0 33.33%">{{
+                        betHistory.betMoney
+                      }}</span>
+                      <span style="flex: 0 0 33.33%">{{
+                        betHistory.betWinMoney
+                      }}</span>
+                    </div>
                   </div>
-                  <div class="hidden sm:block">
-                    배팅{{ evolution.betting }}
-                    <hr style="margin: 7px 0px" />
-                    당첨{{ evolution.winning }}
-                    <hr style="margin: 7px 0px" />
-                    손익{{ evolution.profitLoss }}
-                  </div>
-                  <div class="hidden sm:block">
-                    배팅전{{ evolution.beforeBetting }}
-                    <hr style="margin: 7px 0px" />
-                    배팅후{{ evolution.afterBetting }}
-                    <hr style="margin: 7px 0px" />
-                    최종금액{{ evolution.finalMoney }}
-                  </div>
-                  <div class="hidden md:block">
-                    {{ evolution.bettingInfo1 }}
-                    <hr style="margin: 7px 0px" />
-                    {{ evolution.bettingInfo2 }}
-                    <hr style="margin: 7px 0px" />
-                    {{ evolution.bettingInfo3 }}
-                  </div>
-                  <div class="hidden md:block">
+                  <div class="hidden lg:block" style="text-align: center">
                     <button
                       mat-flat-button
-                      class="bet-mat-small-8"
+                      class="bet-mat-small-6"
                       [color]="'warn'"
                     >
-                      데이터확인
+                      <span class="ml-2 mr-1">데이터확인</span>
                     </button>
-                  </div>
-                  <div class="hidden md:block">
-                    {{ evolution.comp }}
+                    <hr style="margin: 7px 0px" />
+                    {{ info.comp }}
                   </div>
                   <div class="hidden lg:block">
-                    본사{{ evolution.mainofficeName }}({{
-                      evolution.mainofficePercent
-                    }}%&nbsp;:&nbsp;{{ evolution.mainofficePoint }}P)
-                    <hr style="margin: 7px 0px" />
-                    대본{{ evolution.branchName }}({{
-                      evolution.branchPercent
-                    }}%&nbsp;:&nbsp;{{ evolution.branchPoint }}P)
-                    <hr style="margin: 7px 0px" />
-                    부본{{ evolution.divisionName }}({{
-                      evolution.divisionPercent
-                    }}%&nbsp;:&nbsp;{{ evolution.divisionPoint }}P)
-                    <hr style="margin: 7px 0px" />
-                    총판{{ evolution.officeName }}({{
-                      evolution.officePercent
-                    }}%&nbsp;:&nbsp;{{ evolution.officePoint }}P)
-                    <hr style="margin: 7px 0px" />
-                    매장{{ evolution.storeName }}({{
-                      evolution.storePercent
-                    }}%&nbsp;:&nbsp;{{ evolution.storePoint }}P)
-                    <hr style="margin: 7px 0px" />
-                    회원{{ evolution.memberName }}({{
-                      evolution.memberPercent
-                    }}%&nbsp;:&nbsp;{{ evolution.memberPoint }}P)
+                    <span *ngIf="!!info.mainInfo">
+                      본사: {{ info.mainInfo.name }}({{
+                        info.mainInfo.commissionRate
+                      }},{{ info.mainInfo.point }})</span
+                    >
+                    <hr *ngIf="!!info.mainInfo" style="margin: 7px 0px" />
+                    <span *ngIf="!!info.branchInfo"
+                      >대본: {{ info.branchInfo.name }}({{
+                        info.branchInfo.commissionRate
+                      }},{{ info.branchInfo.point }})</span
+                    >
+                    <hr *ngIf="!!info.branchInfo" style="margin: 7px 0px" />
+                    <span *ngIf="!!info.divisionInfo"
+                      >부본: {{ info.divisionInfo.name }}({{
+                        info.divisionInfo.commissionRate
+                      }},{{ info.divisionInfo.point }})</span
+                    >
+                    <hr *ngIf="!!info.divisionInfo" style="margin: 7px 0px" />
+                    <span *ngIf="!!info.officeInfo"
+                      >총판: {{ info.officeInfo.name }}({{
+                        info.officeInfo.commissionRate
+                      }},{{ info.officeInfo.point }})</span
+                    >
+                    <hr *ngIf="!!info.officeInfo" style="margin: 7px 0px" />
+                    <span *ngIf="!!info.storeInfo"
+                      >매장: {{ info.storeInfo.name }}({{
+                        info.storeInfo.commissionRate
+                      }},{{ info.storeInfo.point }})</span
+                    >
                   </div>
                   <div class="hidden lg:block">
-                    {{ evolution.bettingTime }}
+                    {{ info.bettingRegistDate }}
                     <hr style="margin: 7px 0px" />
-                    {{ evolution.registrationDate }}
+                    {{ info.registrationDate }}
                   </div>
                 </div>
               </ng-container>
@@ -250,7 +322,7 @@
         </ng-container>
       </ng-container>
 
-      <ng-template #noEvolution>
+      <ng-template #noUser>
         <div
           class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
         >
diff --git a/src/app/modules/admin/game/evolution/components/list.component.ts b/src/app/modules/admin/game/evolution/components/list.component.ts
index 845c4c6..b83ab3d 100644
--- a/src/app/modules/admin/game/evolution/components/list.component.ts
+++ b/src/app/modules/admin/game/evolution/components/list.component.ts
@@ -41,21 +41,20 @@ import { EvolutionService } from '../services/evolution.service';
     `
       .evolution-grid {
         /*                     상부   유저   게임  금액  최종 */
-        grid-template-columns: 100px 140px auto 100px 100px;
-
+        grid-template-columns: 80px 100px 150px 80px 80px auto 100px 150px 120px;
         @screen sm {
           /*                     상부   유저   게임  금액  최종   배팅 */
-          grid-template-columns: 100px 140px auto 100px 100px 140px;
+          grid-template-columns: 80px 100px 150px 80px 80px auto 100px 150px 120px;
         }
 
         @screen md {
           /*                     상부   유저   게임  금액  최종    배팅 데이터  콤프  */
-          grid-template-columns: 100px 140px auto 100px 100px 140px 100px 20px;
+          grid-template-columns: 80px 100px 150px 80px 80px auto 100px 150px 120px;
         }
 
         @screen lg {
-          /*                     상부   유저   게임  금액  최종    배팅  데이터  콤프  롤링  배팅시간  */
-          grid-template-columns: 100px 140px auto 100px 100px 140px 100px 20px 140px 100px;
+          /*                     상부   유저   게임  금액  최종    배팅  데이터&콤프  롤링  배팅시간  */
+          grid-template-columns: 80px 100px 150px 60px 60px auto 80px 150px 120px;
         }
       }
     `,
diff --git a/src/app/modules/admin/game/evolution/evolution.module.ts b/src/app/modules/admin/game/evolution/evolution.module.ts
index 7fb584a..184f451 100644
--- a/src/app/modules/admin/game/evolution/evolution.module.ts
+++ b/src/app/modules/admin/game/evolution/evolution.module.ts
@@ -11,6 +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 { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatMomentDateModule } from '@angular/material-moment-adapter';
 
 import { TranslocoModule } from '@ngneat/transloco';
 
@@ -37,6 +39,8 @@ import { evolutionRoutes } from './evolution.routing';
     MatSortModule,
     MatSelectModule,
     MatTooltipModule,
+    MatDatepickerModule,
+    MatMomentDateModule,
   ],
 })
 export class EvolutionModule {}
diff --git a/src/app/modules/admin/game/evolution/models/evolution.ts b/src/app/modules/admin/game/evolution/models/evolution.ts
index b1b9a92..cc32f14 100644
--- a/src/app/modules/admin/game/evolution/models/evolution.ts
+++ b/src/app/modules/admin/game/evolution/models/evolution.ts
@@ -4,38 +4,49 @@ export interface Evolution {
   highRank?: string;
   gameId?: string;
   nickname?: string;
+  vendorName?: string;
   gameName?: string;
-  gameInfo1?: string;
-  gameInfo2?: string;
-  gameInfo3?: string;
-  betting?: number;
-  winning?: number;
-  profitLoss?: number;
-  afterBetting?: number;
-  beforeBetting?: number;
-  finalMoney?: number;
-  bettingInfo1?: string;
-  bettingInfo2?: number;
-  bettingInfo3?: number;
+  bettingId?: string;
+  betStatus?: string;
+  betMoney?: string;
+  betWinMoney?: string;
+  betBeforeMoney?: string;
+  betProfitLossMoney?: string;
+  betAfterMoney?: string;
+  totalMoney?: string;
   comp?: string;
-  mainofficeName?: string;
-  mainofficePercent?: number;
-  mainofficePoint?: number;
-  branchName?: string;
-  branchPercent?: number;
-  branchPoint?: number;
-  divisionName?: string;
-  divisionPercent?: number;
-  divisionPoint?: number;
-  officeName?: string;
-  officePercent?: number;
-  officePoint?: number;
-  storeName?: string;
-  storePercent?: number;
-  storePoint?: number;
-  memberName?: string;
-  memberPercent?: number;
-  memberPoint?: number;
-  bettingTime?: string;
+  betHistorys?: [
+    {
+      pickBetType?: string;
+      betMoney?: string;
+      betWinMoney?: string;
+    }
+  ];
+  mainInfo?: {
+    name?: string;
+    commissionRate?: string;
+    point?: string;
+  };
+  branchInfo?: {
+    name?: string;
+    commissionRate?: string;
+    point?: string;
+  };
+  divisionInfo?: {
+    name?: string;
+    commissionRate?: string;
+    point?: string;
+  };
+  officeInfo?: {
+    name?: string;
+    commissionRate?: string;
+    point?: string;
+  };
+  storeInfo?: {
+    name?: string;
+    commissionRate?: string;
+    point?: string;
+  };
+  bettingRegistDate?: string;
   registrationDate?: string;
 }
diff --git a/src/app/modules/admin/game/slot/components/list.component.html b/src/app/modules/admin/game/slot/components/list.component.html
index 607ab27..ab61417 100644
--- a/src/app/modules/admin/game/slot/components/list.component.html
+++ b/src/app/modules/admin/game/slot/components/list.component.html
@@ -27,6 +27,7 @@
 
   <div
     class="relative flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between py-4 px-6 md:px-8 border-b"
+    style="font-size: small"
   >
     <div class="flex items-center justify-center px-6 py-4 space-x-3">
       <div class="grid grid-cols-2 gap-x-4 gap-y-1">
@@ -156,6 +157,7 @@
             <!-- Header -->
             <div
               class="slot-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"
+              style="font-size: x-small"
             >
               <div class="hidden lg:block">상위</div>
               <div class="hidden lg:block">
@@ -193,6 +195,7 @@
               <ng-container *ngFor="let slot of slots; trackBy: __trackByFn">
                 <div
                   class="slot-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
+                  style="font-size: small"
                 >
                   <div class="hidden lg:block">
                     {{ slot.highRank }}
@@ -213,9 +216,9 @@
                   </div>
                   <div class="hidden lg:block">{{ slot.betStatus }}</div>
                   <div class="hidden lg:block">
-                    {{ slot.betPrevMoney }}
+                    {{ slot.betBeforeMoney }}
                     <hr style="margin: 7px 0px" />
-                    {{ slot.bettingMoney }}
+                    {{ slot.betMoney }}
                     <hr style="margin: 7px 0px" />
                     {{ slot.betAfterMoney }}
                   </div>
diff --git a/src/app/modules/admin/game/slot/models/slot.ts b/src/app/modules/admin/game/slot/models/slot.ts
index d46f32d..f5babb5 100644
--- a/src/app/modules/admin/game/slot/models/slot.ts
+++ b/src/app/modules/admin/game/slot/models/slot.ts
@@ -8,9 +8,9 @@ export interface Slot {
   gameName?: string;
   bettingId?: string;
   betStatus?: string;
-  betPrevMoney?: number;
-  bettingMoney?: number;
-  betAfterMoney?: number;
+  betBeforeMoney?: string;
+  betMoney?: string;
+  betAfterMoney?: string;
   comp?: string;
   mainInfo?: {
     name?: string;
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index 416d855..15cab3f 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -3,10 +3,14 @@
 /*  @ Styles from this file will override 'vendors.scss' and Beteran's base styles.
 /* ----------------------------------------------------------------------------------------------------- */
 
-.mat-form-field.bet-mat-form-field-wrapper-mb-0>.mat-form-field-wrapper {
+.mat-form-field.bet-mat-form-field-wrapper-mb-0 > .mat-form-field-wrapper {
   margin-bottom: 0em;
 }
 
 .bet-mat-small-8 {
   transform: scale(0.8);
 }
+
+.bet-mat-small-6 {
+  transform: scale(0.6);
+}