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/modules/admin/bank/deposit/components/list.component.html

@@ -25,21 +25,16 @@
   <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>
     <mat-form-field
       class="bet-mat-form-field-wrapper-mb-0 mr-2"
       style="width: 100%"
     >
-        <textarea
+      <textarea matInput cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
-          matInput
-          cdkTextareaAutosize
-          cdkAutosizeMinRows="2"
-        ></textarea>
     </mat-form-field>
     <button mat-flat-button [color]="'primary'">메모저장</button>
   </div>
 
-    <div>
+  <div class="flex items-center mt-2 mb-2 ml-6">
     <div>
       <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
         입금처리
@@ -51,7 +46,6 @@
       </button>
     </div>
   </div>
-  </div>
 
   <!-- Search -->
   <div

src/app/modules/admin/member/current-user/components/list.component.html

@@ -132,6 +132,7 @@
                     mat-flat-button
                     class="bet-mat-small-8"
                     [color]="'primary'"
+                    (click)="__onClickMessage($event)"
                   >
                     <mat-icon svgIcon="email-outline"> </mat-icon>
                   </button>
@@ -140,6 +141,7 @@
                     mat-flat-button
                     class="bet-mat-small-8"
                     [color]="'primary'"
+                    (click)="viewCasino('eafcf73c-c98b-44a2-847b-751a3aebbaa6')"
                   >
                     배팅내역
                   </button>

src/app/modules/admin/member/current-user/components/list.component.ts

@@ -33,6 +33,8 @@ import { CurrentUser } from '../models/current-user';
 import { CurrentUserPagination } from '../models/current-user-pagination';
 import { CurrentUserService } from '../services/current-user.service';
 import { Router } from '@angular/router';
+import { MatDialog } from '@angular/material/dialog';
+import { MessageComposeComponent } from '../compose/message-compose.component';
 
 @Component({
   selector: 'current-user-list',
@@ -102,7 +104,8 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
     private _fuseConfirmationService: FuseConfirmationService,
     private _formBuilder: FormBuilder,
     private _currentUserService: CurrentUserService,
-    private router: Router
+    private router: Router,
+    private _matDialog: MatDialog
   ) {}
 
   // -----------------------------------------------------------------------------------------------------
@@ -205,6 +208,10 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
     let url: string = 'member/user/' + id;
     this.router.navigateByUrl(url);
   }
+  viewCasino(id: string): void {
+    let url: string = 'game/casino';
+    this.router.navigateByUrl(url);
+  }
   // -----------------------------------------------------------------------------------------------------
   // @ Private methods
   // -----------------------------------------------------------------------------------------------------
@@ -230,4 +237,13 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
   __trackByFn(index: number, item: any): any {
     return item.id || index;
   }
+  __onClickMessage(event: MouseEvent): void {
+    const dialogRef = this._matDialog.open(MessageComposeComponent, {
+      data: { price: '', memo: '' },
+    });
+
+    dialogRef.afterClosed().subscribe((result) => {
+      console.log('Compose dialog was closed!');
+    });
+  }
 }

src/app/modules/admin/member/current-user/compose/index.ts

@@ -0,0 +1,3 @@
+import { MessageComposeComponent } from './message-compose.component';
+
+export const COMPOSE = [MessageComposeComponent];

src/app/modules/admin/member/current-user/compose/message-compose.component.html

@@ -0,0 +1,89 @@
+<div class="flex flex-col max-w-240 md:min-w-160 max-h-screen -m-6">
+  <!-- Header -->
+  <div
+    class="flex flex-0 items-center justify-between h-16 pr-3 sm:pr-5 pl-6 sm:pl-8 bg-primary text-on-primary"
+  >
+    <div class="text-lg font-medium">쪽지보내기</div>
+    <button mat-icon-button (click)="saveAndClose()" [tabIndex]="-1">
+      <mat-icon
+        class="text-current"
+        [svgIcon]="'heroicons_outline:x'"
+      ></mat-icon>
+    </button>
+  </div>
+
+  <!-- Compose form -->
+  <form
+    class="flex flex-col flex-auto p-6 sm:p-8 overflow-y-auto"
+    [formGroup]="composeForm"
+  >
+    <div class="flex">
+      <mat-form-field class="w-1/3 pr-2">
+        <mat-label>제목</mat-label>
+        <input matInput [required]="true" />
+      </mat-form-field>
+    </div>
+    <div class="mt-8">
+      <mat-form-field
+        class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full"
+      >
+        <mat-label>글쓴이</mat-label>
+        <input matInput [required]="true" [formControlName]="'writer'" />
+      </mat-form-field>
+    </div>
+    <div class="mt-8">
+      <mat-form-field
+        class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full"
+      >
+        <mat-label>받는이</mat-label>
+        <input matInput [required]="true" [formControlName]="'writer'" />
+      </mat-form-field>
+    </div>
+    <mat-form-field
+      class="mt-8 fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full"
+    >
+      <textarea
+        matInput
+        [required]="true"
+        [rows]="5"
+        matTextareaAutosize
+        [formControlName]="'content'"
+      ></textarea>
+      <mat-label>내용</mat-label>
+    </mat-form-field>
+    <mat-form-field
+      class="mt-8 fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full"
+    >
+      <textarea
+        matInput
+        [rows]="5"
+        matTextareaAutosize
+        [formControlName]="'content'"
+      ></textarea>
+      <mat-label>선택</mat-label>
+      --선택--5008\n**입금계좌문의시(가상계좌1)****출금비밀번호문의시**----탈퇴,졸업관련----**졸업안내----입금관련문의---->>타인명의입금시----환전관련문의----**환전지연안내(환전량
+      증가)**은행점검(뱅킹장애)등으로 충환전지연안내서버점검안내서버점검완료안내
+    </mat-form-field>
+
+    <!-- Actions -->
+    <div
+      class="flex flex-col sm:flex-row sm:items-center justify-between mt-4 sm:mt-6"
+    >
+      <div class="flex items-center mt-4 sm:mt-0">
+        <!-- Send -->
+        <button
+          class="order-first sm:order-last"
+          mat-flat-button
+          [color]="'primary'"
+          (click)="send()"
+        >
+          쪽지보내기
+        </button>
+        <!-- Save as draft -->
+        <button class="sm:mx-3" mat-stroked-button (click)="saveAsDraft()">
+          <span>닫기</span>
+        </button>
+      </div>
+    </div>
+  </form>
+</div>

src/app/modules/admin/member/current-user/compose/message-compose.component.ts

@@ -0,0 +1,94 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  Inject,
+  OnInit,
+  ViewEncapsulation,
+} from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { SiteService } from 'app/modules/polyglot/site/services/site.service';
+import { IdentityService } from 'app/modules/polyglot/identity/services/identity.service';
+import { Site } from 'app/modules/proto/models/site_pb';
+
+export interface MessageComposeData {
+  price: string;
+  memo: string;
+}
+export interface MessageComposeResult {
+  price: string;
+  memo: string;
+}
+
+@Component({
+  selector: 'app-message-compose',
+  templateUrl: './message-compose.component.html',
+  encapsulation: ViewEncapsulation.None,
+})
+export class MessageComposeComponent implements OnInit {
+  composeForm!: FormGroup;
+  sites: any[] = [];
+  // quillModules: any = {
+  //   toolbar: [
+  //     ['bold', 'italic', 'underline'],
+  //     [{ align: [] }, { list: 'ordered' }, { list: 'bullet' }],
+  //     ['clean'],
+  //   ],
+  // };
+
+  /**
+   * Constructor
+   */
+  constructor(
+    public matDialogRef: MatDialogRef<MessageComposeComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: MessageComposeData,
+    private _formBuilder: FormBuilder,
+    private _identityService: IdentityService,
+    private _changeDetectorRef: ChangeDetectorRef
+  ) {}
+
+  // -----------------------------------------------------------------------------------------------------
+  // @ Lifecycle hooks
+  // -----------------------------------------------------------------------------------------------------
+
+  /**
+   * On init
+   */
+  ngOnInit(): void {
+    // Create the form
+    this.composeForm = this._formBuilder.group({
+      price: ['', [Validators.required]],
+      memo: ['', [Validators.required]],
+    });
+  }
+
+  // -----------------------------------------------------------------------------------------------------
+  // @ Public methods
+  // -----------------------------------------------------------------------------------------------------
+
+  /**
+   * Save and close
+   */
+  saveAndClose(): void {
+    // Save the message as a draft
+    this.saveAsDraft();
+
+    // Close the dialog
+    this.matDialogRef.close();
+  }
+
+  /**
+   * Discard the message
+   */
+  discard(): void {}
+
+  /**
+   * Save the message as a draft
+   */
+  saveAsDraft(): void {}
+
+  /**
+   * Send the message
+   */
+  send(): void {}
+}

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

@@ -18,16 +18,18 @@ import { MatGridListModule } from '@angular/material/grid-list';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatCardModule } from '@angular/material/card';
+import { MatDialogModule } from '@angular/material/dialog';
 
 import { TranslocoModule } from '@ngneat/transloco';
 
 import { SharedModule } from 'app/shared/shared.module';
 
+import { COMPOSE } from './compose';
 import { COMPONENTS } from './components';
 
 import { currentUserRoutes } from './current-user.routing';
 @NgModule({
-  declarations: [COMPONENTS],
+  declarations: [COMPONENTS, COMPOSE],
   imports: [
     TranslocoModule,
     SharedModule,
@@ -50,6 +52,7 @@ import { currentUserRoutes } from './current-user.routing';
     MatSlideToggleModule,
     MatRadioModule,
     MatCardModule,
+    MatDialogModule,
   ],
 })
 export class CurrentUserModule {}

src/app/modules/admin/member/partner-recommendation/components/list.component.html

@@ -1,177 +1,151 @@
-<div
+<div class="flex flex-col flex-auto min-w-0">
-  class="sm:absolute sm:inset-0 flex flex-col flex-auto min-w-0 sm:overflow-hidden bg-card dark:bg-transparent"
+  <div class="flex-auto border-t -mt-px pt-4 sm:pt-6">
->
+    <div class="w-full max-w-screen-xl mx-auto">
-  <!-- Header -->
+      <div class="grid grid-cols-1 sm:grid-cols-6 gap-6 w-full min-w-0">
+        <!-- Budget distribution -->
         <div
-    class="relative flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between py-8 px-6 md:px-8 border-b"
+          class="sm:col-span-6 flex flex-col flex-auto p-6 bg-card shadow rounded-2xl overflow-hidden"
         >
-    <!-- Loader -->
+          <div class="text-lg font-medium tracking-tight leading-6 truncate">
-    <div class="absolute inset-x-0 bottom-0" *ngIf="isLoading">
+            추천코드등록
-      <mat-progress-bar [mode]="'indeterminate'"></mat-progress-bar>
           </div>
-    <!-- Title -->
-    <div class="text-4xl font-extrabold tracking-tight">추천코드등록</div>
-    <!-- Actions -->
-    <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
-      <button mat-icon-button (click)="__onClickSearch1()">
-        <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
-      </button>
-    </div>
-  </div>
-  <!-- Search -->
-  <div
-    *ngIf="__isSearchOpened1"
-    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"
-  >
-    <!-- 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="">매장아이디</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>
-
-  <!-- Main -->
-  <div class="flex flex-auto overflow-hidden">
-    <!-- Products list -->
-    <div
-      class="flex flex-col flex-auto sm:mb-18 overflow-hidden sm:overflow-y-auto"
-    >
-      <ng-container
-        *ngIf="partnerRecommendations$ | async as partnerRecommendations"
-      >
           <ng-container
             *ngIf="
-            partnerRecommendations.length > 0;
+              registPartnerStoreDataSource.data.length > 0;
-            else noPartnerRecommendation
+              else noRegistPartnerRecommendation
             "
           >
-          <div class="grid">
+            <div class="flex flex-col flex-auto mt-2 overflow-x-auto">
-            <!-- Header -->
+              <table
-            <div
+                class="min-w-240 overflow-y-visible"
-              class="partner-recommendation-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"
+                mat-table
+                [dataSource]="registPartnerStoreDataSource"
               >
-              <div>선택</div>
+                <!-- Checkbox Column -->
-              <div>상부</div>
+                <ng-container matColumnDef="select">
-              <div>
+                  <th mat-header-cell *matHeaderCellDef>
-                아이디
+                    <mat-checkbox
-                <hr style="margin: 7px 0px" />
+                      (change)="$event ? __toggleAllRows() : null"
-                닉네임
+                      [checked]="selection.hasValue() && __isAllSelected()"
-                <hr style="margin: 7px 0px" />
+                      [indeterminate]="
-                상태
+                        selection.hasValue() && !__isAllSelected()
-              </div>
-              <div>등급</div>
-              <div class="hidden md:block">계좌정보</div>
-              <div class="hidden sm:block">
-                머니
-                <hr style="margin: 7px 0px" />
-                콤프
-              </div>
-              <div class="hidden md:block">사이트</div>
-            </div>
-            <!-- Rows -->
-            <ng-container
-              *ngIf="partnerRecommendations$ | async as partnerRecommendations"
-            >
-              <ng-container
-                *ngFor="
-                  let partnerRecommendation of partnerRecommendations;
-                  trackBy: __trackByFn
                       "
+                      [aria-label]="__checkboxLabel()"
                     >
-                <div
+                    </mat-checkbox>
-                  class="partner-recommendation-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
+                  </th>
+                  <td mat-cell *matCellDef="let row">
+                    <mat-checkbox
+                      (click)="$event.stopPropagation()"
+                      (change)="$event ? selection.toggle(row) : null"
+                      [checked]="selection.isSelected(row)"
+                      [aria-label]="__checkboxLabel(row)"
                     >
-                  <div>
+                    </mat-checkbox>
-                    <mat-checkbox></mat-checkbox>
+                  </td>
-                  </div>
-                  <div>{{ partnerRecommendation.highRank }}</div>
-                  <div>
-                    {{ partnerRecommendation.signinId }}
-                    <hr style="margin: 7px 0px" />
-                    {{ partnerRecommendation.nickname }}
-                    <hr style="margin: 7px 0px" />
-                    {{ partnerRecommendation.state }}
-                  </div>
-                  <div>
-                    {{ partnerRecommendation.rank }}
-                  </div>
-                  <div>
-                    {{ partnerRecommendation.bankName }}
-                    <hr style="margin: 7px 0px" />
-                    {{ partnerRecommendation.accountHolder }}
-                    <hr style="margin: 7px 0px" />
-                    {{ partnerRecommendation.accountNumber }}
-                  </div>
-                  <div class="hidden sm:block">
-                    {{ partnerRecommendation.holdingMoney }}
-                    <hr style="margin: 7px 0px" />
-                    {{ partnerRecommendation.ownComp }}
-                  </div>
-                  <div class="hidden lg:block">
-                    {{ partnerRecommendation.siteAddress }}
-                  </div>
-                </div>
                 </ng-container>
+
+                <!-- Total -->
+                <ng-container matColumnDef="referrerMember">
+                  <th mat-header-cell *matHeaderCellDef>상위</th>
+                  <td mat-cell *matCellDef="let info">
+                    <span class="font-medium text-right">
+                      {{ __getRefererMember(info) }}
+                    </span>
+                  </td>
                 </ng-container>
-          </div>
+
-          <div>
+                <!-- Expenses amount -->
-            <button
+                <ng-container matColumnDef="memberClass">
-              mat-flat-button
+                  <th mat-header-cell *matHeaderCellDef>등급</th>
-              class="bet-mat-small-8"
+
-              [color]="'primary'"
+                  <td mat-cell *matCellDef="let info">
-              (click)="__onClickAdd($event)"
+                    {{ info.getMemberClass()?.getName() }}
+                  </td>
+                </ng-container>
+
+                <ng-container matColumnDef="username">
+                  <th mat-header-cell *matHeaderCellDef>아이디</th>
+                  <td mat-cell *matCellDef="let info">
+                    {{ info.getUsername() }}
+                  </td>
+                </ng-container>
+
+                <!-- Expenses amount -->
+                <ng-container matColumnDef="nickname">
+                  <th mat-header-cell *matHeaderCellDef>닉네임</th>
+                  <td mat-cell *matCellDef="let info">
+                    {{ info.getNickname() }}
+                  </td>
+                </ng-container>
+
+                <!-- Expenses amount -->
+                <ng-container matColumnDef="amountMoney">
+                  <th mat-header-cell *matHeaderCellDef>머니</th>
+                  <td mat-cell *matCellDef="let info">1000원</td>
+                </ng-container>
+
+                <ng-container matColumnDef="comp">
+                  <th mat-header-cell *matHeaderCellDef>콤프</th>
+                  <td mat-cell *matCellDef="let info">0P</td>
+                </ng-container>
+
+                <ng-container matColumnDef="bankInfo">
+                  <th mat-header-cell *matHeaderCellDef>계좌정보</th>
+                  <td mat-cell *matCellDef="let info">
+                    <span>{{ info.getBankAccount() }}</span>
+                    <span>{{ info.getBankAccount() }}</span>
+                    <span>{{ info.getBankAccount() }}</span>
+                  </td>
+                </ng-container>
+
+                <ng-container matColumnDef="state">
+                  <th mat-header-cell *matHeaderCellDef>상태</th>
+                  <td mat-cell *matCellDef="let info">정상</td>
+                </ng-container>
+
+                <ng-container matColumnDef="site">
+                  <th mat-header-cell *matHeaderCellDef>사이트</th>
+                  <td mat-cell *matCellDef="let info">
+                    {{ info.getSite().getUrl() }}
+                  </td>
+                </ng-container>
+                <ng-container matColumnDef="stroeTableFooter">
+                  <td
+                    class="py-6 px-0 border-0"
+                    mat-footer-cell
+                    *matFooterCellDef
+                    colspan="10"
                   >
-              추천인으로 추가
+                    <div>
-            </button>
+                      <button mat-stroked-button>추천인으로 추가</button>
                     </div>
+                  </td>
+                </ng-container>
+
+                <tr
+                  mat-header-row
+                  *matHeaderRowDef="registPartnerStoreTableColumns"
+                ></tr>
+                <tr
+                  mat-row
+                  *matRowDef="let row; columns: registPartnerStoreTableColumns"
+                ></tr>
+                <tr
+                  class="h-16 border-0"
+                  mat-footer-row
+                  *matFooterRowDef="['stroeTableFooter']"
+                ></tr>
+              </table>
 
               <mat-paginator
-            class="sm:absolute sm:inset-x-0 sm:bottom-0 border-b sm:border-t sm:border-b-0 z-10 bg-gray-50 dark:bg-transparent"
-            [ngClass]="{ 'pointer-events-none': isLoading }"
-            [length]="pagination?.length"
-            [pageIndex]="pagination?.page"
-            [pageSize]="pagination?.size"
                 [pageSizeOptions]="[5, 10, 25, 100]"
-            [showFirstLastButtons]="true"
+                aria-label="Select page of users"
               ></mat-paginator>
-        </ng-container>
+            </div>
           </ng-container>
 
-      <ng-template #noPartnerRecommendation>
+          <ng-template #noRegistPartnerRecommendation>
             <div
               class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
             >
@@ -179,150 +153,130 @@
             </div>
           </ng-template>
         </div>
-
+        <!-- Budget details -->
-    <!-- Actions -->
-    <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
-      <button mat-icon-button (click)="__onClickSearch2()">
-        <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
-      </button>
-    </div>
-  </div>
-  <!-- Search -->
         <div
-    *ngIf="__isSearchOpened2"
+          class="sm:col-span-6 flex flex-col flex-auto p-6 bg-card shadow rounded-2xl overflow-hidden"
-    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"
         >
-    <!-- Actions -->
+          <div class="text-lg font-medium tracking-tight leading-6 truncate">
-    <div fxLayout="row wrap" class="items-center mt-6 sm:mt-0 sm:ml-0">
+            추천코드삭제
-      <!-- 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="">매장닉네임</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>
-  <!-- Products list -->
-  <div
-    class="flex flex-col flex-auto sm:mb-18 overflow-hidden sm:overflow-y-auto"
-  >
           <ng-container
-      *ngIf="partnerRecommendations$ | async as partnerRecommendations"
+            *ngIf="
-    >
+              removePartnerStoreDataSource.data.length > 0;
-      <ng-container
+              else noRemovePartnerRecommendation
-        *ngIf="partnerRecommendations.length > 0; else noPartnerRecommendation"
-      >
-        <div class="grid">
-          <!-- Header -->
-          <div
-            class="partner-recommendation-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>
-              아이디
-              <hr style="margin: 7px 0px" />
-              닉네임
-            </div>
-            <div>
-              등급
-              <hr style="margin: 7px 0px" />
-              상태
-            </div>
-            <div class="hidden md:block">사용여부</div>
-            <div class="hidden sm:block">회원수</div>
-          </div>
-          <!-- Rows -->
-          <ng-container
-            *ngIf="partnerRecommendations$ | async as partnerRecommendations"
-          >
-            <ng-container
-              *ngFor="
-                let partnerRecommendation of partnerRecommendations;
-                trackBy: __trackByFn
             "
           >
-              <div
+            <div class="flex flex-col flex-auto">
-                class="partner-recommendation-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
+              <table
+                class="min-w-240 overflow-y-visible"
+                mat-table
+                [dataSource]="removePartnerStoreDataSource"
               >
-                <div>
+                <!-- Checkbox Column -->
-                  <mat-checkbox></mat-checkbox>
+                <ng-container matColumnDef="select">
-                </div>
+                  <th mat-header-cell *matHeaderCellDef>
-                <div>{{ partnerRecommendation.highRank }}</div>
+                    <mat-checkbox
-                <div>
+                      (change)="$event ? __toggleAllRows() : null"
-                  {{ partnerRecommendation.signinId }}
+                      [checked]="selection.hasValue() && __isAllSelected()"
-                  <hr style="margin: 7px 0px" />
+                      [indeterminate]="
-                  {{ partnerRecommendation.nickname }}
+                        selection.hasValue() && !__isAllSelected()
-                </div>
+                      "
-                <div>
+                      [aria-label]="__checkboxLabel()"
-                  {{ partnerRecommendation.rank }}
-                  <hr style="margin: 7px 0px" />
-                  {{ partnerRecommendation.state }}
-                </div>
-                <div>{{ partnerRecommendation.useOrNot }}</div>
-                <div class="hidden sm:block">
-                  {{ partnerRecommendation.memberCount }}
-                </div>
-                <div class="hidden lg:block">
-                  {{ partnerRecommendation.siteAddress }}
-                </div>
-              </div>
-            </ng-container>
-          </ng-container>
-        </div>
-        <div>
-          <button
-            mat-flat-button
-            class="bet-mat-small-8"
-            [color]="'primary'"
-            (click)="__onClickDelete($event)"
                     >
-            추천인 삭제
+                    </mat-checkbox>
-          </button>
+                  </th>
-        </div>
+                  <td mat-cell *matCellDef="let row">
+                    <mat-checkbox
+                      (click)="$event.stopPropagation()"
+                      (change)="$event ? selection.toggle(row) : null"
+                      [checked]="selection.isSelected(row)"
+                      [aria-label]="__checkboxLabel(row)"
+                    >
+                    </mat-checkbox>
+                  </td>
+                </ng-container>
+                <!-- Total -->
+                <ng-container matColumnDef="referrerMember">
+                  <th mat-header-cell *matHeaderCellDef>상위</th>
+                  <td mat-cell *matCellDef="let info">
+                    <span class="font-medium text-right">
+                      {{ __getRefererMember(info) }}
+                    </span>
+                  </td>
+                </ng-container>
 
+                <!-- Expenses amount -->
+                <ng-container matColumnDef="memberClass">
+                  <th mat-header-cell *matHeaderCellDef>등급</th>
+
+                  <td mat-cell *matCellDef="let info">
+                    {{ info.getMemberClass()?.getName() }}
+                  </td>
+                </ng-container>
+
+                <ng-container matColumnDef="username">
+                  <th mat-header-cell *matHeaderCellDef>아이디</th>
+                  <td mat-cell *matCellDef="let info">
+                    {{ info.getUsername() }}
+                  </td>
+                </ng-container>
+
+                <!-- Expenses amount -->
+                <ng-container matColumnDef="nickname">
+                  <th mat-header-cell *matHeaderCellDef>닉네임</th>
+                  <td mat-cell *matCellDef="let info">
+                    {{ info.getNickname() }}
+                  </td>
+                </ng-container>
+
+                <!-- Expenses amount -->
+                <ng-container matColumnDef="isUse">
+                  <th mat-header-cell *matHeaderCellDef>사용여부</th>
+                  <td mat-cell *matCellDef="let info">Y</td>
+                </ng-container>
+
+                <!-- Expenses amount -->
+                <ng-container matColumnDef="memberCount">
+                  <th mat-header-cell *matHeaderCellDef>회원수</th>
+                  <td mat-cell *matCellDef="let info">1</td>
+                </ng-container>
+
+                <ng-container matColumnDef="stroeTableFooter">
+                  <td
+                    class="py-6 px-0 border-0"
+                    mat-footer-cell
+                    *matFooterCellDef
+                    colspan="10"
+                  >
+                    <div>
+                      <button mat-stroked-button>추천인삭제</button>
+                    </div>
+                  </td>
+                </ng-container>
+
+                <tr
+                  mat-header-row
+                  *matHeaderRowDef="removePartnerStoreTableColumns"
+                ></tr>
+                <tr
+                  mat-row
+                  *matRowDef="let row; columns: removePartnerStoreTableColumns"
+                ></tr>
+
+                <tr
+                  class="h-16 border-0"
+                  mat-footer-row
+                  *matFooterRowDef="['stroeTableFooter']"
+                ></tr>
+              </table>
               <mat-paginator
-          class="sm:absolute sm:inset-x-0 sm:bottom-0 border-b sm:border-t sm:border-b-0 z-10 bg-gray-50 dark:bg-transparent"
-          [ngClass]="{ 'pointer-events-none': isLoading }"
-          [length]="pagination?.length"
-          [pageIndex]="pagination?.page"
-          [pageSize]="pagination?.size"
                 [pageSizeOptions]="[5, 10, 25, 100]"
-          [showFirstLastButtons]="true"
+                aria-label="Select page of users"
               ></mat-paginator>
-      </ng-container>
+            </div>
           </ng-container>
 
-    <ng-template #noPartnerRecommendation>
+          <ng-template #noRemovePartnerRecommendation>
             <div
               class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
             >
@@ -330,4 +284,7 @@
             </div>
           </ng-template>
         </div>
+      </div>
+    </div>
+  </div>
 </div>

src/app/modules/admin/member/partner-recommendation/components/list.component.ts

@@ -33,10 +33,14 @@ import { PartnerRecommendation as PartnerRecommendation } from '../models/partne
 import { PartnerRecommendationPagination as PartnerRecommendationPagination } from '../models/partner-recommendation-pagination';
 import { PartnerRecommendationService as PartnerRecommendationService } from '../services/partner-recommendation.service';
 
-import { Router } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 
 import { MatDialog } from '@angular/material/dialog';
 import { RegistComposeComponent } from '../compose/regist-compose.component';
+import { MatTableDataSource } from '@angular/material/table';
+import { MemberModel } from 'app/modules/proto/models/member_pb';
+import { ListMembersResponse } from 'app/modules/proto/c2se/member_pb';
+import { SelectionModel } from '@angular/cdk/collections';
 import { AddComposeComponent } from '../compose/add-compose.component';
 import { DeleteComposeComponent } from '../compose/delete-compose.component';
 @Component({
@@ -74,15 +78,45 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
   @ViewChild(MatPaginator) private _paginator!: MatPaginator;
   @ViewChild(MatSort) private _sort!: MatSort;
 
-  partnerRecommendations$!: Observable<PartnerRecommendation[] | undefined>;
+  registPartnerStoreDataSource: MatTableDataSource<MemberModel> =
+    new MatTableDataSource();
+  removePartnerStoreDataSource: MatTableDataSource<MemberModel> =
+    new MatTableDataSource();
+
+  registPartnerStoreTableColumns: string[] = [
+    'select',
+    'referrerMember',
+    'memberClass',
+    'username',
+    'nickname',
+    'amountMoney',
+    'comp',
+    'bankInfo',
+    'state',
+    'site',
+  ];
+
+  removePartnerStoreTableColumns: string[] = [
+    'select',
+    'referrerMember',
+    'memberClass',
+    'username',
+    'nickname',
+    'isUse',
+    'memberCount',
+  ];
 
   __isSearchOpened1 = false;
   __isSearchOpened2 = false;
+  listMembers!: MemberModel[];
+
   isLoading = false;
   searchInputControl = new FormControl();
   selectedPartnerRecommendation?: PartnerRecommendation;
   pagination?: PartnerRecommendationPagination;
 
+  selection = new SelectionModel<MemberModel>(true, []);
+
   private _unsubscribeAll: Subject<any> = new Subject<any>();
 
   /**
@@ -90,6 +124,7 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
    */
   constructor(
     private _changeDetectorRef: ChangeDetectorRef,
+    private _activatedRoute: ActivatedRoute,
     private _fuseConfirmationService: FuseConfirmationService,
     private _formBuilder: FormBuilder,
     private _partnerRecommendationService: PartnerRecommendationService,
@@ -105,27 +140,40 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
    * On init
    */
   ngOnInit(): void {
-    // Get the pagination
+    // Get the products
-    this._partnerRecommendationService.pagination$
+    this._activatedRoute.data.subscribe((data) => {
-      .pipe(takeUntil(this._unsubscribeAll))
+      let listMemberResult: ListMembersResponse.Result =
-      .subscribe((pagination: PartnerRecommendationPagination | undefined) => {
+        data['listPartnerStore'];
-        // Update the pagination
+
-        this.pagination = pagination;
+      this.listMembers = listMemberResult.getMembersList();
+
+      this.registPartnerStoreDataSource.data = listMemberResult
+        .getMembersList()
+        .filter(
+          (v: MemberModel) =>
+            v.getMemberClass()?.getId() ===
+            'e11cac11-3825-4f4e-9cd5-39367f23f973'
+        );
+      this.removePartnerStoreDataSource.data = listMemberResult
+        .getMembersList()
+        .filter(
+          (v: MemberModel) =>
+            v.getMemberClass()?.getId() ===
+            'e11cac11-3825-4f4e-9cd5-39367f23f973'
+        );
+
+      /* console.log('dddd', listMemberResult.getMembersList()); */
 
       // Mark for check
       this._changeDetectorRef.markForCheck();
     });
-
-    // Get the products
-    this.partnerRecommendations$ =
-      this._partnerRecommendationService.partnerRecommendations$;
   }
 
   /**
    * After view init
    */
   ngAfterViewInit(): void {
-    if (this._sort && this._paginator) {
+    /* if (this._sort && this._paginator) {
       // Set the initial sort
       this._sort.sort({
         id: 'signinId',
@@ -161,7 +209,7 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
           })
         )
         .subscribe();
-    }
+    } */
   }
 
   /**
@@ -185,6 +233,31 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
   // @ Private methods
   // -----------------------------------------------------------------------------------------------------
 
+  /** Selects all rows if they are not all selected; otherwise clear selection. */
+  __toggleAllRows() {
+    if (this.__isAllSelected()) {
+      this.selection.clear();
+      return;
+    }
+
+    this.selection.select(...this.registPartnerStoreDataSource.data);
+  }
+
+  __isAllSelected() {
+    const numSelected = this.selection.selected.length;
+    const numRows = this.registPartnerStoreDataSource.data.length;
+    return numSelected === numRows;
+  }
+
+  /** The label for the checkbox on the passed row */
+  __checkboxLabel(row?: MemberModel): string {
+    if (!row) {
+      return `${this.__isAllSelected() ? 'deselect' : 'select'} all`;
+    }
+    return `${
+      this.selection.isSelected(row) ? 'deselect' : 'select'
+    } row ${row.getUsername()}`;
+  }
   /**
    * Create product
    */
@@ -225,6 +298,7 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
       console.log('Compose dialog was closed!');
     });
   }
+
   __onClickAdd(event: MouseEvent): void {
     const dialogRef = this._matDialog.open(AddComposeComponent);
 
@@ -239,4 +313,11 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
       console.log('Compose dialog was closed!');
     });
   }
+
+  __getRefererMember(member: MemberModel): string {
+    /* console.log(member.getReferrerMember()?.getUsername());
+
+    const name = member.getReferrerMember()?.getUsername(); */
+    return '없음';
+  }
 }

src/app/modules/admin/member/partner-recommendation/partner-recommendation.module.ts

@@ -14,6 +14,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatGridListModule } from '@angular/material/grid-list';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatTableModule } from '@angular/material/table';
 
 import { TranslocoModule } from '@ngneat/transloco';
 
@@ -44,6 +45,7 @@ import { partnerRecommendationRoutes } from './partner-recommendation.routing';
     MatGridListModule,
     MatRadioModule,
     MatCheckboxModule,
+    MatTableModule,
   ],
 })
 export class PartnerRecommendationModule {}

src/app/modules/admin/member/partner-recommendation/partner-recommendation.routing.ts

@@ -2,7 +2,10 @@ import { Route } from '@angular/router';
 
 import { ListComponent } from './components/list.component';
 
-import { PartnerRecommendationsResolver } from './resolvers/partner-recommendation.resolver';
+import {
+  ListPartnerStoreResolver,
+  PartnerRecommendationsResolver,
+} from './resolvers/partner-recommendation.resolver';
 
 export const partnerRecommendationRoutes: Route[] = [
   // {
@@ -14,7 +17,7 @@ export const partnerRecommendationRoutes: Route[] = [
     path: '',
     component: ListComponent,
     resolve: {
-      PartnerRecommendations: PartnerRecommendationsResolver,
+      listPartnerStore: ListPartnerStoreResolver,
     },
   },
 ];

src/app/modules/admin/member/partner-recommendation/resolvers/partner-recommendation.resolver.ts

@@ -5,6 +5,11 @@ import {
   Router,
   RouterStateSnapshot,
 } from '@angular/router';
+import { MemberService } from 'app/modules/polyglot/member/services/member.service';
+import {
+  ListMembersRequest,
+  ListMembersResponse,
+} from 'app/modules/proto/c2se/member_pb';
 import { catchError, Observable, throwError } from 'rxjs';
 
 import { PartnerRecommendation } from '../models/partner-recommendation';
@@ -89,3 +94,35 @@ export class PartnerRecommendationsResolver implements Resolve<any> {
     return this._partnerRecommendationService.getPartnerRecommendations();
   }
 }
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ListPartnerStoreResolver implements Resolve<any> {
+  /**
+   * Constructor
+   */
+  constructor(private _memberService: MemberService) {}
+
+  // -----------------------------------------------------------------------------------------------------
+  // @ Public methods
+  // -----------------------------------------------------------------------------------------------------
+
+  /**
+   * Resolver
+   *
+   * @param route
+   * @param state
+   */
+  resolve(
+    route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot
+  ):
+    | Observable<ListMembersResponse.Result>
+    | Promise<ListMembersResponse.Result>
+    | ListMembersResponse.Result {
+    let req = new ListMembersRequest();
+
+    return this._memberService.listMembers(req);
+  }
+}

src/app/modules/admin/member/user/components/list.component.html

@@ -236,7 +236,7 @@
                       <button mat-menu-item (click)="__onClickMessage($event)">
                         쪽지보내기
                       </button>
-                      <button mat-menu-item (click)="__onClickSignout($event)">
+                      <button mat-menu-item (click)="viewSlot(user.id!)">
                         배팅리스트
                       </button>
                       <button mat-menu-item (click)="__onClickSignout($event)">