버튼 수정

src/app/modules/admin/board/customer/components/list.component.html

@@ -89,6 +89,16 @@
     </div>
   </div>
 
+  <div
+    *ngIf="__checkedCustomers"
+    class="relative flex flex-col sm:flex-row flex-0 sm:items-center py-4 px-6 md:px-8 border-b"
+  >
+    <div>
+      <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
+        디비에서 완전삭제
+      </button>
+    </div>
+  </div>
   <!-- Main -->
   <div class="flex flex-auto overflow-hidden">
     <!-- Products list -->
@@ -102,8 +112,10 @@
             <div
               class="customer-grid z-10 sticky top-0 grid gap-4 py-4 px-6 md:px-8shadow text-md font-semibold text-secondary bg-gray-50 dark:bg-black dark:bg-opacity-5"
             >
-              <div>
-                <mat-checkbox></mat-checkbox>
+              <div style="text-align: center">
+                <mat-checkbox
+                  (change)="__onChangeChkCustomersAll($event)"
+                ></mat-checkbox>
               </div>
               <div>번호</div>
               <div>
@@ -141,8 +153,11 @@
                 <div
                   class="customer-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
                 >
-                  <div class="hidden sm:block truncate">
-                    <mat-checkbox></mat-checkbox>
+                  <div style="text-align: center">
+                    <mat-checkbox
+                      #chkUsers
+                      (change)="__onChangeChkCustomers()"
+                    ></mat-checkbox>
                   </div>
                   <!-- 일련번호 -->
                   <div class="hidden sm:block truncate">

src/app/modules/admin/board/customer/components/list.component.ts

@@ -5,7 +5,9 @@ import {
   Component,
   OnDestroy,
   OnInit,
+  QueryList,
   ViewChild,
+  ViewChildren,
   ViewEncapsulation,
 } from '@angular/core';
 import {
@@ -14,7 +16,7 @@ import {
   FormGroup,
   Validators,
 } from '@angular/forms';
-import { MatCheckboxChange } from '@angular/material/checkbox';
+import { MatCheckbox, MatCheckboxChange } from '@angular/material/checkbox';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import {
@@ -69,7 +71,10 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
   @ViewChild(MatPaginator) private _paginator!: MatPaginator;
   @ViewChild(MatSort) private _sort!: MatSort;
 
+  @ViewChildren('chkUsers') chkUsers!: QueryList<MatCheckbox>;
+
   customers$!: Observable<Customer[] | undefined>;
+  __checkedCustomers: string[] = [];
 
   isLoading = false;
   searchInputControl = new FormControl();
@@ -206,4 +211,33 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
   __trackByFn(index: number, item: any): any {
     return item.id || index;
   }
+
+  onClickCustomers(typeNum: number): void {
+    if (this.__checkedCustomers.length === 0) {
+      return;
+    }
+
+    this.__checkedCustomers.map((v) => {});
+  }
+
+  __onChangeChkCustomersAll(event: MatCheckboxChange): void {
+    let checked = event.checked;
+    this.chkUsers.forEach((c, i) => {
+      c.checked = checked;
+    });
+    this.__onChangeChkCustomers();
+  }
+
+  __onChangeChkUsers(event: MatCheckboxChange): void {
+    this.__onChangeChkCustomers();
+  }
+
+  __onChangeChkCustomers(): void {
+    this.__checkedCustomers = [];
+    this.chkUsers.forEach((c, i) => {
+      if (c.checked) {
+        this.__checkedCustomers.push(c.value);
+      }
+    });
+  }
 }

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

@@ -34,6 +34,18 @@
       </div>
     </div>
   </div>
+  <div
+    class="relative flex flex-col sm:flex-row flex-0 sm:items-center py-4 px-6 md:px-8 border-b"
+  >
+    <div>
+      <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>
+  </div>
 
   <!-- Main -->
   <div class="flex flex-auto overflow-hidden">