ux is changed

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

@@ -10,7 +10,19 @@
       <mat-progress-bar [mode]="'indeterminate'"></mat-progress-bar>
     </div>
     <!-- Title -->
-    <div class="text-4xl font-extrabold tracking-tight">User</div>
+    <div class="text-4xl font-extrabold tracking-tight">
+      <span>User</span>
+      <span>
+        <button mat-icon-button (click)="__onClickSearch()">
+          <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
+        </button>
+      </span>
+      <span>
+        <button mat-icon-button (click)="__onClickSearch()">
+          <mat-icon svgIcon="iconsmind:file_excel"></mat-icon>
+        </button>
+      </span>
+    </div>
 
     <!-- Actions -->
     <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
@@ -21,9 +33,6 @@
       >&nbsp;&nbsp;
       <span>총 콤프:<span style="color: red">394,860</span>원</span>&nbsp;&nbsp;
       <span>총 합계:<span style="color: blue">21,832,733</span>원</span>
-      <button mat-icon-button (click)="__onClickSearch()">
-        <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
-      </button>
     </div>
   </div>
   <!-- Memo -->
@@ -38,15 +47,6 @@
     </mat-form-field>
     <button mat-flat-button [color]="'primary'">메모저장</button>
   </div>
-  <div class="flex items-center mt-2 mb-2 ml-6">
-    <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
-      카지노머니확인
-    </button>
-    <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
-      엑셀저장
-    </button>
-  </div>
-  <hr style="margin: 7px 0px" />
 
   <!-- Search -->
   <div
@@ -177,7 +177,23 @@
       </button>
     </div>
   </div>
-
+  <!-- actions -->
+  <div
+    *ngIf="__checkedUsers.length > 0"
+    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"
+  >
+    <button mat-button [matMenuTriggerFor]="menuChangeMemberState">
+      상태 변경
+    </button>
+    <mat-menu #menuChangeMemberState="matMenu">
+      <button mat-menu-item>정상</button>
+      <button mat-menu-item>대기</button>
+      <button mat-menu-item>탈퇴</button>
+      <button mat-menu-item>휴면</button>
+      <button mat-menu-item>블랙</button>
+      <button mat-menu-item>정지</button>
+    </mat-menu>
+  </div>
   <!-- Main -->
   <div class="flex flex-auto overflow-hidden">
     <!-- Products list -->
@@ -194,7 +210,9 @@
               class="user-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 style="text-align: center">
-                <mat-checkbox></mat-checkbox>
+                <mat-checkbox
+                  (change)="__onChangeChkUsersAll($event)"
+                ></mat-checkbox>
               </div>
               <div style="text-align: center">관리</div>
               <div style="text-align: center">요율</div>
@@ -246,7 +264,11 @@
                   class="user-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
                 >
                   <div style="text-align: center">
-                    <mat-checkbox></mat-checkbox>
+                    <mat-checkbox
+                      #chkUsers
+                      [value]="member.getId()"
+                      (change)="__onChangeChkUsers($event)"
+                    ></mat-checkbox>
                   </div>
                   <div class="hidden lg:block" style="text-align: center">
                     <div
@@ -381,40 +403,5 @@
         </div>
       </ng-template>
     </div>
-    <div class="mt-2 mb-2 ml-6">
-      <div>
-        <div>
-          <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
-            정상
-          </button>
-        </div>
-        <div>
-          <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
-            대기
-          </button>
-        </div>
-        <div>
-          <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
-            탈퇴
-          </button>
-        </div>
-        <div>
-          <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
-            휴면
-          </button>
-        </div>
-        <div>
-          <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
-            블랙
-          </button>
-        </div>
-        <div>
-          <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
-            정지
-          </button>
-        </div>
-      </div>
-    </div>
-    <hr style="margin: 7px 0px" />
   </div>
 </div>

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

@@ -5,7 +5,9 @@ import {
   Component,
   OnDestroy,
   OnInit,
+  QueryList,
   ViewChild,
+  ViewChildren,
   ViewEncapsulation,
 } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
@@ -39,6 +41,7 @@ import { MemberModel, MemberState } from 'app/modules/proto/models/member_pb';
 import { MemberClass } from 'app/modules/proto/models/member_class_pb';
 import { MemberClassService } from 'app/modules/polyglot/member_class/services/member_class.service';
 import { result } from 'lodash';
+import { MatCheckbox, MatCheckboxChange } from '@angular/material/checkbox';
 
 @Component({
   selector: 'user-list',
@@ -79,6 +82,8 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
   @ViewChild(MatPaginator) private _paginator!: MatPaginator;
   @ViewChild(MatSort) private _sort!: MatSort;
 
+  @ViewChildren('chkUsers') chkUsers!: QueryList<MatCheckbox>;
+
   listMembers$!: Observable<MemberModel[] | undefined>;
 
   __isSearchOpened = false;
@@ -88,6 +93,7 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
   pagination?: UserPagination;
 
   memberClasses!: MemberClass[];
+  __checkedUsers: string[] = [];
 
   signoutBlockConfigForm!: FormGroup;
 
@@ -327,6 +333,27 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
     );
   }
 
+  __onChangeChkUsersAll(event: MatCheckboxChange): void {
+    let checked = event.checked;
+    this.chkUsers.forEach((c, i) => {
+      c.checked = checked;
+    });
+    this.__updateCheckedUsers();
+  }
+
+  __onChangeChkUsers(event: MatCheckboxChange): void {
+    this.__updateCheckedUsers();
+  }
+
+  __updateCheckedUsers(): void {
+    this.__checkedUsers = [];
+    this.chkUsers.forEach((c, i) => {
+      if (c.checked) {
+        this.__checkedUsers.push(c.value);
+      }
+    });
+  }
+
   __getParentUsername(member: MemberModel): string {
     if (!member.getParentMember()) {
       return '';