Merge branch 'feature/BETERAN-BACKEND-APP-BROWSER-init' of https://gitlab.loafle.net/bet/beteran-backend-app-browser into feature/BETERAN-BACKEND-APP-BROWSER-init

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();

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',

src/app/mock-api/apps/game/slot/data.ts

@@ -11,8 +11,8 @@ export const slots = [
     gameName: '스타라이트 프린세스',
     bettingId: '62acfwdcmdkei911dkd81221fb',
     betStatus: '베팅',
-    betPrevMoney: '187,730',
+    betBeforeMoney: '187,730',
-    bettingMoney: '1,000',
+    betMoney: '1,000',
     betAfterMoney: '186,930',
     comp: 'Y',
     mainInfo: {
@@ -53,8 +53,8 @@ export const slots = [
     gameName: '스타라이트 프린세스',
     bettingId: '62acfwdcmdkei911dkd81221fb',
     betStatus: '베팅',
-    betPrevMoney: '187,730',
+    betBeforeMoney: '187,730',
-    bettingMoney: '1,000',
+    betMoney: '1,000',
     betAfterMoney: '186,930',
     comp: 'Y',
     mainInfo: {
@@ -95,8 +95,8 @@ export const slots = [
     gameName: '스타라이트 프린세스',
     bettingId: '62acfwdcmdkei911dkd81221fb',
     betStatus: '베팅',
-    betPrevMoney: '187,730',
+    betBeforeMoney: '187,730',
-    bettingMoney: '1,000',
+    betMoney: '1,000',
     betAfterMoney: '186,930',
     comp: 'Y',
     mainInfo: {

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
+    <div class="flex items-center justify-center px-6 py-4 space-x-3">
-      class="bet-mat-form-field-wrapper-mb-0 mr-2"
+      <div class="grid grid-cols-2 gap-x-4 gap-y-1">
-      style="width: 100%"
+        <div class="font-medium tracking-tight text-secondary">기간</div>
-    >
+        <div class="font-medium" style="color: blue">
-      <textarea matInput cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
+          2022-06-01 00:00 ~ 2022-06-21 23:59 까지
-    </mat-form-field>
+        </div>
-    <button mat-flat-button [color]="'primary'">메모저장</button> -->
+        <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">
+      <div fxLayout="row wrap" class="items-center mt-6 sm:mt-0 sm:ml-0">
-        <mat-select placeholder="전체">
+        <!-- SelectBox -->
-          <mat-option value="">전체</mat-option>
+        <mat-form-field fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
-          <mat-option value="">배팅100만미만</mat-option>
+          <mat-select placeholder="전체">
-          <mat-option value="">배팅100-300만</mat-option>
+            <mat-option value="">전체</mat-option>
-          <mat-option value="">배팅300-500만</mat-option>
+            <mat-option value="">배팅100만미만</mat-option>
-          <mat-option value="">배팅500만이상</mat-option>
+            <mat-option value="">배팅100-300만</mat-option>
-          <mat-option value="">당첨1000만초과</mat-option>
+            <mat-option value="">배팅300-500만</mat-option>
-        </mat-select>
+            <mat-option value="">배팅500만이상</mat-option>
-      </mat-form-field>
+            <mat-option value="">당첨1000만초과</mat-option>
-      <mat-form-field fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
+          </mat-select>
-        <mat-select placeholder="검색항목">
+        </mat-form-field>
-          <mat-option value="">아이디</mat-option>
+
-          <mat-option value="">게임아이디</mat-option>
+        <mat-form-field
-          <mat-option value="">닉네임</mat-option>
+          class="bet-mat-form-field-wrapper-mb-0 mr-2"
-          <mat-option value="">게임종류</mat-option>
+          [floatLabel]="'always'"
-        </mat-select>
+        >
-      </mat-form-field>
+          <input
-      <!-- Search -->
+            matInput
-      <mat-form-field
+            [matDatepicker]="picker1"
-        fxFlex
+            [placeholder]="'Choose a date'"
-        class="fuse-mat-rounded min-w-64 bet-mat-form-field-wrapper-mb-0 mr-2"
+          />
-      >
+          <mat-datepicker-toggle
-        <mat-icon
+            matSuffix
-          class="icon-size-5"
+            [for]="picker1"
-          matPrefix
+          ></mat-datepicker-toggle>
-          [svgIcon]="'heroicons_solid:search'"
+          <mat-datepicker #picker1></mat-datepicker>
-        ></mat-icon>
+        </mat-form-field>
-        <input
+        <mat-form-field
-          matInput
+          class="bet-mat-form-field-wrapper-mb-0 mr-2"
-          [formControl]="searchInputControl"
+          [floatLabel]="'always'"
-          [autocomplete]="'off'"
+        >
-          [placeholder]="'Search user'"
+          <input
-        />
+            matInput
-      </mat-form-field>
+            [matDatepicker]="picker2"
-      <!-- Add user button -->
+            [placeholder]="'Choose a date'"
-      <button
+          />
-        fxFlex
+          <mat-datepicker-toggle
-        mat-flat-button
+            matSuffix
-        style="position: fixed; margin-top: 4px"
+            [for]="picker2"
-        [color]="'primary'"
+          ></mat-datepicker-toggle>
-        (click)="__createProduct()"
+          <mat-datepicker #picker2></mat-datepicker>
-      >
+        </mat-form-field>
-        <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
+
-        <span class="ml-2 mr-1">Search</span>
+        <mat-form-field fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
-      </button>
+          <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 class="hidden lg:block" style="font-size: x-small">상위</div>
-              <div>유저</div>
+              <div class="hidden lg:block" style="font-size: x-small">
-              <div>게임</div>
+                게임코드ID
-              <div class="hidden sm:block">금액</div>
+                <hr style="margin: 7px 0px" />
-              <div class="hidden sm:block">최종금액</div>
+                사이트ID
-              <div class="hidden md:block">배팅</div>
+                <hr style="margin: 7px 0px" />
-              <div class="hidden md:block">데이터</div>
+                닉네임
-              <div class="hidden md:block">콤프</div>
+              </div>
-              <div class="hidden lg:block">롤링</div>
+              <div class="hidden lg:block" style="font-size: x-small">
-              <div class="hidden lg:block">
+                게임사이름
+                <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 class="hidden lg:block">
-                  <div>
+                    {{ info.highRank }}
-                    게임ID{{ evolution.gameId }}
+                  </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 }}
+                    <div
-                    <hr style="margin: 7px 0px" />
+                      *ngFor="let betHistory of info.betHistorys"
-                    {{ evolution.gameInfo1 }}
+                      style="display: flex; flex-wrap: wrap; padding-left: 0"
-                    <hr style="margin: 7px 0px" />
+                    >
-                    {{ evolution.gameInfo2 }}
+                      <span style="flex: 0 0 33.33%">{{
-                    <hr style="margin: 7px 0px" />
+                        betHistory.pickBetType
-                    {{ evolution.gameInfo3 }}
+                      }}</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">
+                  <div class="hidden lg:block" style="text-align: center">
-                    배팅{{ 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">
                     <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>
+                    <hr style="margin: 7px 0px" />
-                  <div class="hidden md:block">
+                    {{ info.comp }}
-                    {{ evolution.comp }}
                   </div>
                   <div class="hidden lg:block">
-                    본사{{ evolution.mainofficeName }}({{
+                    <span *ngIf="!!info.mainInfo">
-                      evolution.mainofficePercent
+                      본사: {{ info.mainInfo.name }}({{
-                    }}%&nbsp;:&nbsp;{{ evolution.mainofficePoint }}P)
+                        info.mainInfo.commissionRate
-                    <hr style="margin: 7px 0px" />
+                      }},{{ info.mainInfo.point }})</span
-                    대본{{ evolution.branchName }}({{
+                    >
-                      evolution.branchPercent
+                    <hr *ngIf="!!info.mainInfo" style="margin: 7px 0px" />
-                    }}%&nbsp;:&nbsp;{{ evolution.branchPoint }}P)
+                    <span *ngIf="!!info.branchInfo"
-                    <hr style="margin: 7px 0px" />
+                      >대본: {{ info.branchInfo.name }}({{
-                    부본{{ evolution.divisionName }}({{
+                        info.branchInfo.commissionRate
-                      evolution.divisionPercent
+                      }},{{ info.branchInfo.point }})</span
-                    }}%&nbsp;:&nbsp;{{ evolution.divisionPoint }}P)
+                    >
-                    <hr style="margin: 7px 0px" />
+                    <hr *ngIf="!!info.branchInfo" style="margin: 7px 0px" />
-                    총판{{ evolution.officeName }}({{
+                    <span *ngIf="!!info.divisionInfo"
-                      evolution.officePercent
+                      >부본: {{ info.divisionInfo.name }}({{
-                    }}%&nbsp;:&nbsp;{{ evolution.officePoint }}P)
+                        info.divisionInfo.commissionRate
-                    <hr style="margin: 7px 0px" />
+                      }},{{ info.divisionInfo.point }})</span
-                    매장{{ evolution.storeName }}({{
+                    >
-                      evolution.storePercent
+                    <hr *ngIf="!!info.divisionInfo" style="margin: 7px 0px" />
-                    }}%&nbsp;:&nbsp;{{ evolution.storePoint }}P)
+                    <span *ngIf="!!info.officeInfo"
-                    <hr style="margin: 7px 0px" />
+                      >총판: {{ info.officeInfo.name }}({{
-                    회원{{ evolution.memberName }}({{
+                        info.officeInfo.commissionRate
-                      evolution.memberPercent
+                      }},{{ info.officeInfo.point }})</span
-                    }}%&nbsp;:&nbsp;{{ evolution.memberPoint }}P)
+                    >
+                    <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"
         >

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;
         }
       }
     `,

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 {}

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;
+  bettingId?: string;
-  gameInfo2?: string;
+  betStatus?: string;
-  gameInfo3?: string;
+  betMoney?: string;
-  betting?: number;
+  betWinMoney?: string;
-  winning?: number;
+  betBeforeMoney?: string;
-  profitLoss?: number;
+  betProfitLossMoney?: string;
-  afterBetting?: number;
+  betAfterMoney?: string;
-  beforeBetting?: number;
+  totalMoney?: string;
-  finalMoney?: number;
-  bettingInfo1?: string;
-  bettingInfo2?: number;
-  bettingInfo3?: number;
   comp?: string;
-  mainofficeName?: string;
+  betHistorys?: [
-  mainofficePercent?: number;
+    {
-  mainofficePoint?: number;
+      pickBetType?: string;
-  branchName?: string;
+      betMoney?: string;
-  branchPercent?: number;
+      betWinMoney?: string;
-  branchPoint?: number;
+    }
-  divisionName?: string;
+  ];
-  divisionPercent?: number;
+  mainInfo?: {
-  divisionPoint?: number;
+    name?: string;
-  officeName?: string;
+    commissionRate?: string;
-  officePercent?: number;
+    point?: string;
-  officePoint?: number;
+  };
-  storeName?: string;
+  branchInfo?: {
-  storePercent?: number;
+    name?: string;
-  storePoint?: number;
+    commissionRate?: string;
-  memberName?: string;
+    point?: string;
-  memberPercent?: number;
+  };
-  memberPoint?: number;
+  divisionInfo?: {
-  bettingTime?: string;
+    name?: string;
+    commissionRate?: string;
+    point?: string;
+  };
+  officeInfo?: {
+    name?: string;
+    commissionRate?: string;
+    point?: string;
+  };
+  storeInfo?: {
+    name?: string;
+    commissionRate?: string;
+    point?: string;
+  };
+  bettingRegistDate?: string;
   registrationDate?: string;
 }

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>

src/app/modules/admin/game/slot/models/slot.ts

@@ -8,9 +8,9 @@ export interface Slot {
   gameName?: string;
   bettingId?: string;
   betStatus?: string;
-  betPrevMoney?: number;
+  betBeforeMoney?: string;
-  bettingMoney?: number;
+  betMoney?: string;
-  betAfterMoney?: number;
+  betAfterMoney?: string;
   comp?: string;
   mainInfo?: {
     name?: string;

src/app/modules/auth/confirmation-required/confirmation-required.component.html

@@ -1,8 +1,6 @@
-<div
+<div class="flex flex-col flex-auto items-center sm:justify-center min-w-0">
-  class="flex flex-col sm:flex-row items-center md:items-start sm:justify-center md:justify-start flex-auto min-w-0"
->
   <div
-    class="md:flex md:items-center md:justify-end w-full sm:w-auto md:h-full md:w-1/2 py-8 px-4 sm:p-12 md:p-16 sm:rounded-2xl md:rounded-none sm:shadow md:shadow-none sm:bg-card"
+    class="w-full sm:w-auto py-8 px-4 sm:p-12 sm:rounded-2xl sm:shadow sm:bg-card"
   >
     <div class="w-full max-w-80 sm:w-80 mx-auto sm:mx-0">
       <!-- Logo -->
@@ -31,90 +29,4 @@
       </div>
     </div>
   </div>
-  <div
-    class="relative hidden md:flex flex-auto items-center justify-center w-1/2 h-full p-16 lg:px-28 overflow-hidden bg-gray-800 dark:border-l"
-  >
-    <!-- Background - @formatter:off -->
-    <!-- Rings -->
-    <svg
-      class="absolute inset-0 pointer-events-none"
-      viewBox="0 0 960 540"
-      width="100%"
-      height="100%"
-      preserveAspectRatio="xMidYMax slice"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g
-        class="text-gray-700 opacity-25"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="100"
-      >
-        <circle r="234" cx="196" cy="23"></circle>
-        <circle r="234" cx="790" cy="491"></circle>
-      </g>
-    </svg>
-    <!-- Dots -->
-    <svg
-      class="absolute -top-16 -right-16 text-gray-700"
-      viewBox="0 0 220 192"
-      width="220"
-      height="192"
-      fill="none"
-    >
-      <defs>
-        <pattern
-          id="837c3e70-6c3a-44e6-8854-cc48c737b659"
-          x="0"
-          y="0"
-          width="20"
-          height="20"
-          patternUnits="userSpaceOnUse"
-        >
-          <rect x="0" y="0" width="4" height="4" fill="currentColor"></rect>
-        </pattern>
-      </defs>
-      <rect
-        width="220"
-        height="192"
-        fill="url(#837c3e70-6c3a-44e6-8854-cc48c737b659)"
-      ></rect>
-    </svg>
-    <!-- @formatter:on -->
-    <!-- Content -->
-    <div class="z-10 relative w-full max-w-2xl">
-      <div class="text-7xl font-bold leading-none text-gray-100">
-        <div>Welcome to</div>
-        <div>our community</div>
-      </div>
-      <div class="mt-6 text-lg tracking-tight leading-6 text-gray-400">
-        Fuse helps developers to build organized and well coded dashboards full
-        of beautiful and rich modules. Join us and start building your
-        application today.
-      </div>
-      <div class="flex items-center mt-8">
-        <div class="flex flex-0 items-center -space-x-1.5">
-          <img
-            class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
-            src="assets/images/avatars/female-18.jpg"
-          />
-          <img
-            class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
-            src="assets/images/avatars/female-11.jpg"
-          />
-          <img
-            class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
-            src="assets/images/avatars/male-09.jpg"
-          />
-          <img
-            class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
-            src="assets/images/avatars/male-16.jpg"
-          />
-        </div>
-        <div class="ml-4 font-medium tracking-tight text-gray-400">
-          More than 17k people joined us, it's your turn
-        </div>
-      </div>
-    </div>
-  </div>
 </div>

src/app/modules/auth/forgot-password/forgot-password.component.html

@@ -1,8 +1,6 @@
-<div
+<div class="flex flex-col flex-auto items-center sm:justify-center min-w-0">
-  class="flex flex-col sm:flex-row items-center md:items-start sm:justify-center md:justify-start flex-auto min-w-0"
->
   <div
-    class="md:flex md:items-center md:justify-end w-full sm:w-auto md:h-full md:w-1/2 py-8 px-4 sm:p-12 md:p-16 sm:rounded-2xl md:rounded-none sm:shadow md:shadow-none sm:bg-card"
+    class="w-full sm:w-auto py-8 px-4 sm:p-12 sm:rounded-2xl sm:shadow sm:bg-card"
   >
     <div class="w-full max-w-80 sm:w-80 mx-auto sm:mx-0">
       <!-- Logo -->
@@ -39,13 +37,11 @@
           <mat-label>Email address</mat-label>
           <input id="email" matInput [formControlName]="'email'" />
           <mat-error
-            *ngIf="forgotPasswordForm?.get('email')?.hasError('required')"
+            *ngIf="forgotPasswordForm.get('email')?.hasError('required')"
           >
             Email address is required
           </mat-error>
-          <mat-error
+          <mat-error *ngIf="forgotPasswordForm.get('email')?.hasError('email')">
-            *ngIf="forgotPasswordForm?.get('email')?.hasError('email')"
-          >
             Please enter a valid email address
           </mat-error>
         </mat-form-field>
@@ -55,12 +51,12 @@
           class="fuse-mat-button-large w-full mt-3"
           mat-flat-button
           [color]="'primary'"
-          [disabled]="forgotPasswordForm?.disabled"
+          [disabled]="forgotPasswordForm.disabled"
           (click)="sendResetLink()"
         >
-          <span *ngIf="!forgotPasswordForm?.disabled"> Send reset link </span>
+          <span *ngIf="!forgotPasswordForm.disabled"> Send reset link </span>
           <mat-progress-spinner
-            *ngIf="forgotPasswordForm?.disabled"
+            *ngIf="forgotPasswordForm.disabled"
             [diameter]="24"
             [mode]="'indeterminate'"
           ></mat-progress-spinner>
@@ -78,90 +74,4 @@
       </form>
     </div>
   </div>
-  <div
-    class="relative hidden md:flex flex-auto items-center justify-center w-1/2 h-full p-16 lg:px-28 overflow-hidden bg-gray-800 dark:border-l"
-  >
-    <!-- Background - @formatter:off -->
-    <!-- Rings -->
-    <svg
-      class="absolute inset-0 pointer-events-none"
-      viewBox="0 0 960 540"
-      width="100%"
-      height="100%"
-      preserveAspectRatio="xMidYMax slice"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g
-        class="text-gray-700 opacity-25"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="100"
-      >
-        <circle r="234" cx="196" cy="23"></circle>
-        <circle r="234" cx="790" cy="491"></circle>
-      </g>
-    </svg>
-    <!-- Dots -->
-    <svg
-      class="absolute -top-16 -right-16 text-gray-700"
-      viewBox="0 0 220 192"
-      width="220"
-      height="192"
-      fill="none"
-    >
-      <defs>
-        <pattern
-          id="837c3e70-6c3a-44e6-8854-cc48c737b659"
-          x="0"
-          y="0"
-          width="20"
-          height="20"
-          patternUnits="userSpaceOnUse"
-        >
-          <rect x="0" y="0" width="4" height="4" fill="currentColor"></rect>
-        </pattern>
-      </defs>
-      <rect
-        width="220"
-        height="192"
-        fill="url(#837c3e70-6c3a-44e6-8854-cc48c737b659)"
-      ></rect>
-    </svg>
-    <!-- @formatter:on -->
-    <!-- Content -->
-    <div class="z-10 relative w-full max-w-2xl">
-      <div class="text-7xl font-bold leading-none text-gray-100">
-        <div>Welcome to</div>
-        <div>our community</div>
-      </div>
-      <div class="mt-6 text-lg tracking-tight leading-6 text-gray-400">
-        Fuse helps developers to build organized and well coded dashboards full
-        of beautiful and rich modules. Join us and start building your
-        application today.
-      </div>
-      <div class="flex items-center mt-8">
-        <div class="flex flex-0 items-center -space-x-1.5">
-          <img
-            class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
-            src="assets/images/avatars/female-18.jpg"
-          />
-          <img
-            class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
-            src="assets/images/avatars/female-11.jpg"
-          />
-          <img
-            class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
-            src="assets/images/avatars/male-09.jpg"
-          />
-          <img
-            class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
-            src="assets/images/avatars/male-16.jpg"
-          />
-        </div>
-        <div class="ml-4 font-medium tracking-tight text-gray-400">
-          More than 17k people joined us, it's your turn
-        </div>
-      </div>
-    </div>
-  </div>
 </div>

src/app/modules/auth/reset-password/reset-password.component.html

@@ -1,8 +1,6 @@
-<div
+<div class="flex flex-col flex-auto items-center sm:justify-center min-w-0">
-  class="flex flex-col sm:flex-row items-center md:items-start sm:justify-center md:justify-start flex-auto min-w-0"
->
   <div
-    class="md:flex md:items-center md:justify-end w-full sm:w-auto md:h-full md:w-1/2 py-8 px-4 sm:p-12 md:p-16 sm:rounded-2xl md:rounded-none sm:shadow md:shadow-none sm:bg-card"
+    class="w-full sm:w-auto py-8 px-4 sm:p-12 sm:rounded-2xl sm:shadow sm:bg-card"
   >
     <div class="w-full max-w-80 sm:w-80 mx-auto sm:mx-0">
       <!-- Logo -->
@@ -103,14 +101,14 @@
           </button>
           <mat-error
             *ngIf="
-              resetPasswordForm?.get('passwordConfirm')?.hasError('required')
+              resetPasswordForm.get('passwordConfirm')?.hasError('required')
             "
           >
             Password confirmation is required
           </mat-error>
           <mat-error
             *ngIf="
-              resetPasswordForm?.get('passwordConfirm')?.hasError('mustMatch')
+              resetPasswordForm.get('passwordConfirm')?.hasError('mustMatch')
             "
           >
             Passwords must match
@@ -122,14 +120,12 @@
           class="fuse-mat-button-large w-full mt-3"
           mat-flat-button
           [color]="'primary'"
-          [disabled]="resetPasswordForm?.disabled"
+          [disabled]="resetPasswordForm.disabled"
           (click)="resetPassword()"
         >
-          <span *ngIf="!resetPasswordForm?.disabled">
+          <span *ngIf="!resetPasswordForm.disabled"> Reset your password </span>
-            Reset your password
-          </span>
           <mat-progress-spinner
-            *ngIf="resetPasswordForm?.disabled"
+            *ngIf="resetPasswordForm.disabled"
             [diameter]="24"
             [mode]="'indeterminate'"
           ></mat-progress-spinner>
@@ -147,90 +143,4 @@
       </form>
     </div>
   </div>
-  <div
-    class="relative hidden md:flex flex-auto items-center justify-center w-1/2 h-full p-16 lg:px-28 overflow-hidden bg-gray-800 dark:border-l"
-  >
-    <!-- Background - @formatter:off -->
-    <!-- Rings -->
-    <svg
-      class="absolute inset-0 pointer-events-none"
-      viewBox="0 0 960 540"
-      width="100%"
-      height="100%"
-      preserveAspectRatio="xMidYMax slice"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g
-        class="text-gray-700 opacity-25"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="100"
-      >
-        <circle r="234" cx="196" cy="23"></circle>
-        <circle r="234" cx="790" cy="491"></circle>
-      </g>
-    </svg>
-    <!-- Dots -->
-    <svg
-      class="absolute -top-16 -right-16 text-gray-700"
-      viewBox="0 0 220 192"
-      width="220"
-      height="192"
-      fill="none"
-    >
-      <defs>
-        <pattern
-          id="837c3e70-6c3a-44e6-8854-cc48c737b659"
-          x="0"
-          y="0"
-          width="20"
-          height="20"
-          patternUnits="userSpaceOnUse"
-        >
-          <rect x="0" y="0" width="4" height="4" fill="currentColor"></rect>
-        </pattern>
-      </defs>
-      <rect
-        width="220"
-        height="192"
-        fill="url(#837c3e70-6c3a-44e6-8854-cc48c737b659)"
-      ></rect>
-    </svg>
-    <!-- @formatter:on -->
-    <!-- Content -->
-    <div class="z-10 relative w-full max-w-2xl">
-      <div class="text-7xl font-bold leading-none text-gray-100">
-        <div>Welcome to</div>
-        <div>our community</div>
-      </div>
-      <div class="mt-6 text-lg tracking-tight leading-6 text-gray-400">
-        Fuse helps developers to build organized and well coded dashboards full
-        of beautiful and rich modules. Join us and start building your
-        application today.
-      </div>
-      <div class="flex items-center mt-8">
-        <div class="flex flex-0 items-center -space-x-1.5">
-          <img
-            class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
-            src="assets/images/avatars/female-18.jpg"
-          />
-          <img
-            class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
-            src="assets/images/avatars/female-11.jpg"
-          />
-          <img
-            class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
-            src="assets/images/avatars/male-09.jpg"
-          />
-          <img
-            class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
-            src="assets/images/avatars/male-16.jpg"
-          />
-        </div>
-        <div class="ml-4 font-medium tracking-tight text-gray-400">
-          More than 17k people joined us, it's your turn
-        </div>
-      </div>
-    </div>
-  </div>
 </div>

src/app/modules/auth/sign-in/sign-in.component.html

@@ -1,8 +1,6 @@
-<div
+<div class="flex flex-col flex-auto items-center sm:justify-center min-w-0">
-  class="flex flex-col sm:flex-row items-center md:items-start sm:justify-center md:justify-start flex-auto min-w-0"
->
   <div
-    class="md:flex md:items-center md:justify-end w-full sm:w-auto md:h-full md:w-1/2 py-8 px-4 sm:p-12 md:p-16 sm:rounded-2xl md:rounded-none sm:shadow md:shadow-none sm:bg-card"
+    class="w-full sm:w-auto py-8 px-4 sm:p-12 sm:rounded-2xl sm:shadow sm:bg-card"
   >
     <div class="w-full max-w-80 sm:w-80 mx-auto sm:mx-0">
       <!-- Logo -->
@@ -12,16 +10,16 @@
 
       <!-- Title -->
       <div class="mt-8 text-4xl font-extrabold tracking-tight leading-tight">
-        Sign in
+        Login Page
       </div>
-      <div class="flex items-baseline mt-0.5 font-medium">
+      <!-- <div class="flex items-baseline mt-0.5 font-medium">
         <div>Don't have an account?</div>
         <a
           class="ml-1 text-primary-500 hover:underline"
           [routerLink]="['/sign-up']"
           >Sign up
         </a>
-      </div>
+      </div> -->
 
       <!-- Alert -->
       <fuse-alert
@@ -39,19 +37,19 @@
       <form class="mt-8" [formGroup]="signInForm" #signInNgForm="ngForm">
         <!-- Email field -->
         <mat-form-field class="w-full">
-          <mat-label>Email address</mat-label>
+          <mat-label>로그인 아이디</mat-label>
           <input id="email" matInput [formControlName]="'email'" />
-          <mat-error *ngIf="signInForm?.get('email')?.hasError('required')">
+          <mat-error *ngIf="signInForm.get('email')?.hasError('required')">
-            Email address is required
+            아이디를 입력하세요.
           </mat-error>
-          <mat-error *ngIf="signInForm?.get('email')?.hasError('email')">
+          <mat-error *ngIf="signInForm.get('email')?.hasError('email')">
             Please enter a valid email address
           </mat-error>
         </mat-form-field>
 
         <!-- Password field -->
         <mat-form-field class="w-full">
-          <mat-label>Password</mat-label>
+          <mat-label>비밀번호</mat-label>
           <input
             id="password"
             matInput
@@ -80,11 +78,22 @@
               [svgIcon]="'heroicons_solid:eye-off'"
             ></mat-icon>
           </button>
-          <mat-error> Password is required </mat-error>
+          <mat-error> 비밀번호를 입력하세요 </mat-error>
+        </mat-form-field>
+
+        <mat-form-field class="w-full">
+          <mat-label>보안코드*</mat-label>
+          <input id="email" matInput [formControlName]="'recaptcha'" />
+          <mat-error *ngIf="signInForm.get('email')?.hasError('required')">
+            보안코드를 입력하세요.
+          </mat-error>
+          <mat-error *ngIf="signInForm.get('email')?.hasError('email')">
+            유효한 보안코드가 아닙니다.
+          </mat-error>
         </mat-form-field>
 
         <!-- Actions -->
-        <div class="inline-flex items-end justify-between w-full mt-1.5">
+        <!-- <div class="inline-flex items-end justify-between w-full mt-1.5">
           <mat-checkbox [color]="'primary'" [formControlName]="'rememberMe'">
             Remember me
           </mat-checkbox>
@@ -93,33 +102,33 @@
             [routerLink]="['/forgot-password']"
             >Forgot password?
           </a>
-        </div>
+        </div> -->
 
         <!-- Submit button -->
         <button
           class="fuse-mat-button-large w-full mt-6"
           mat-flat-button
           [color]="'primary'"
-          [disabled]="signInForm?.disabled"
+          [disabled]="signInForm.disabled"
           (click)="signIn()"
         >
-          <span *ngIf="!signInForm?.disabled"> Sign in </span>
+          <span *ngIf="!signInForm.disabled"> 로그인</span>
           <mat-progress-spinner
-            *ngIf="signInForm?.disabled"
+            *ngIf="signInForm.disabled"
             [diameter]="24"
             [mode]="'indeterminate'"
           ></mat-progress-spinner>
         </button>
 
         <!-- Separator -->
-        <div class="flex items-center mt-8">
+        <!-- <div class="flex items-center mt-8">
           <div class="flex-auto mt-px border-t"></div>
           <div class="mx-2 text-secondary">Or continue with</div>
           <div class="flex-auto mt-px border-t"></div>
-        </div>
+        </div> -->
 
         <!-- Single sign-on buttons -->
-        <div class="flex items-center mt-8 space-x-4">
+        <!-- <div class="flex items-center mt-8 space-x-4">
           <button class="flex-auto" type="button" mat-stroked-button>
             <mat-icon
               class="icon-size-5"
@@ -138,94 +147,8 @@
               [svgIcon]="'feather:github'"
             ></mat-icon>
           </button>
-        </div>
+        </div> -->
       </form>
     </div>
   </div>
-  <div
-    class="relative hidden md:flex flex-auto items-center justify-center w-1/2 h-full p-16 lg:px-28 overflow-hidden bg-gray-800 dark:border-l"
-  >
-    <!-- Background - @formatter:off -->
-    <!-- Rings -->
-    <svg
-      class="absolute inset-0 pointer-events-none"
-      viewBox="0 0 960 540"
-      width="100%"
-      height="100%"
-      preserveAspectRatio="xMidYMax slice"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g
-        class="text-gray-700 opacity-25"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="100"
-      >
-        <circle r="234" cx="196" cy="23"></circle>
-        <circle r="234" cx="790" cy="491"></circle>
-      </g>
-    </svg>
-    <!-- Dots -->
-    <svg
-      class="absolute -top-16 -right-16 text-gray-700"
-      viewBox="0 0 220 192"
-      width="220"
-      height="192"
-      fill="none"
-    >
-      <defs>
-        <pattern
-          id="837c3e70-6c3a-44e6-8854-cc48c737b659"
-          x="0"
-          y="0"
-          width="20"
-          height="20"
-          patternUnits="userSpaceOnUse"
-        >
-          <rect x="0" y="0" width="4" height="4" fill="currentColor"></rect>
-        </pattern>
-      </defs>
-      <rect
-        width="220"
-        height="192"
-        fill="url(#837c3e70-6c3a-44e6-8854-cc48c737b659)"
-      ></rect>
-    </svg>
-    <!-- @formatter:on -->
-    <!-- Content -->
-    <div class="z-10 relative w-full max-w-2xl">
-      <div class="text-7xl font-bold leading-none text-gray-100">
-        <div>Welcome to</div>
-        <div>our community</div>
-      </div>
-      <div class="mt-6 text-lg tracking-tight leading-6 text-gray-400">
-        Fuse helps developers to build organized and well coded dashboards full
-        of beautiful and rich modules. Join us and start building your
-        application today.
-      </div>
-      <div class="flex items-center mt-8">
-        <div class="flex flex-0 items-center -space-x-1.5">
-          <img
-            class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
-            src="assets/images/avatars/female-18.jpg"
-          />
-          <img
-            class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
-            src="assets/images/avatars/female-11.jpg"
-          />
-          <img
-            class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
-            src="assets/images/avatars/male-09.jpg"
-          />
-          <img
-            class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
-            src="assets/images/avatars/male-16.jpg"
-          />
-        </div>
-        <div class="ml-4 font-medium tracking-tight text-gray-400">
-          More than 17k people joined us, it's your turn
-        </div>
-      </div>
-    </div>
-  </div>
 </div>

src/app/modules/auth/sign-in/sign-in.component.ts

@@ -46,7 +46,7 @@ export class AuthSignInComponent implements OnInit {
         [Validators.required, Validators.email],
       ],
       password: ['admin', Validators.required],
-      rememberMe: [''],
+      recaptcha: ['', Validators.required],
     });
   }
 

src/app/modules/auth/sign-up/sign-up.component.html

@@ -1,8 +1,6 @@
-<div
+<div class="flex flex-col flex-auto items-center sm:justify-center min-w-0">
-  class="flex flex-col sm:flex-row items-center md:items-start sm:justify-center md:justify-start flex-auto min-w-0"
->
   <div
-    class="md:flex md:items-center md:justify-end w-full sm:w-auto md:h-full md:w-1/2 py-8 px-4 sm:p-12 md:p-16 sm:rounded-2xl md:rounded-none sm:shadow md:shadow-none sm:bg-card"
+    class="w-full sm:w-auto py-8 px-4 sm:p-12 sm:rounded-2xl sm:shadow sm:bg-card"
   >
     <div class="w-full max-w-80 sm:w-80 mx-auto sm:mx-0">
       <!-- Logo -->
@@ -18,7 +16,7 @@
         <div>Already have an account?</div>
         <a
           class="ml-1 text-primary-500 hover:underline"
-          [routerLink]="['/sign-in']"
+          [routerLink]="['/pages/authentication/sign-in']"
           >Sign in
         </a>
       </div>
@@ -41,7 +39,7 @@
         <mat-form-field class="w-full">
           <mat-label>Full name</mat-label>
           <input id="name" matInput [formControlName]="'name'" />
-          <mat-error *ngIf="signUpForm?.get('name')?.hasError('required')">
+          <mat-error *ngIf="signUpForm.get('name')?.hasError('required')">
             Full name is required
           </mat-error>
         </mat-form-field>
@@ -50,10 +48,10 @@
         <mat-form-field class="w-full">
           <mat-label>Email address</mat-label>
           <input id="email" matInput [formControlName]="'email'" />
-          <mat-error *ngIf="signUpForm?.get('email')?.hasError('required')">
+          <mat-error *ngIf="signUpForm.get('email')?.hasError('required')">
             Email address is required
           </mat-error>
-          <mat-error *ngIf="signUpForm?.get('email')?.hasError('email')">
+          <mat-error *ngIf="signUpForm.get('email')?.hasError('email')">
             Please enter a valid email address
           </mat-error>
         </mat-form-field>
@@ -121,12 +119,12 @@
           class="fuse-mat-button-large w-full mt-6"
           mat-flat-button
           [color]="'primary'"
-          [disabled]="signUpForm?.disabled"
+          [disabled]="signUpForm.disabled"
           (click)="signUp()"
         >
-          <span *ngIf="!signUpForm?.disabled"> Create your free account </span>
+          <span *ngIf="!signUpForm.disabled"> Create your free account </span>
           <mat-progress-spinner
-            *ngIf="signUpForm?.disabled"
+            *ngIf="signUpForm.disabled"
             [diameter]="24"
             [mode]="'indeterminate'"
           ></mat-progress-spinner>
@@ -134,90 +132,4 @@
       </form>
     </div>
   </div>
-  <div
-    class="relative hidden md:flex flex-auto items-center justify-center w-1/2 h-full p-16 lg:px-28 overflow-hidden bg-gray-800 dark:border-l"
-  >
-    <!-- Background - @formatter:off -->
-    <!-- Rings -->
-    <svg
-      class="absolute inset-0 pointer-events-none"
-      viewBox="0 0 960 540"
-      width="100%"
-      height="100%"
-      preserveAspectRatio="xMidYMax slice"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g
-        class="text-gray-700 opacity-25"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="100"
-      >
-        <circle r="234" cx="196" cy="23"></circle>
-        <circle r="234" cx="790" cy="491"></circle>
-      </g>
-    </svg>
-    <!-- Dots -->
-    <svg
-      class="absolute -top-16 -right-16 text-gray-700"
-      viewBox="0 0 220 192"
-      width="220"
-      height="192"
-      fill="none"
-    >
-      <defs>
-        <pattern
-          id="837c3e70-6c3a-44e6-8854-cc48c737b659"
-          x="0"
-          y="0"
-          width="20"
-          height="20"
-          patternUnits="userSpaceOnUse"
-        >
-          <rect x="0" y="0" width="4" height="4" fill="currentColor"></rect>
-        </pattern>
-      </defs>
-      <rect
-        width="220"
-        height="192"
-        fill="url(#837c3e70-6c3a-44e6-8854-cc48c737b659)"
-      ></rect>
-    </svg>
-    <!-- @formatter:on -->
-    <!-- Content -->
-    <div class="z-10 relative w-full max-w-2xl">
-      <div class="text-7xl font-bold leading-none text-gray-100">
-        <div>Welcome to</div>
-        <div>our community</div>
-      </div>
-      <div class="mt-6 text-lg tracking-tight leading-6 text-gray-400">
-        Fuse helps developers to build organized and well coded dashboards full
-        of beautiful and rich modules. Join us and start building your
-        application today.
-      </div>
-      <div class="flex items-center mt-8">
-        <div class="flex flex-0 items-center -space-x-1.5">
-          <img
-            class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
-            src="assets/images/avatars/female-18.jpg"
-          />
-          <img
-            class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
-            src="assets/images/avatars/female-11.jpg"
-          />
-          <img
-            class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
-            src="assets/images/avatars/male-09.jpg"
-          />
-          <img
-            class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
-            src="assets/images/avatars/male-16.jpg"
-          />
-        </div>
-        <div class="ml-4 font-medium tracking-tight text-gray-400">
-          More than 17k people joined us, it's your turn
-        </div>
-      </div>
-    </div>
-  </div>
 </div>

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);
+}