bug fix

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

@@ -35,6 +35,7 @@
     </div>
   </div>
   <div
+    *ngIf="__checkedUsers.length > 0"
     class="relative flex flex-col sm:flex-row flex-0 sm:items-center py-4 px-6 md:px-8 border-b"
   >
     <div>
@@ -61,7 +62,9 @@
               class="unconnected-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>
-                <mat-checkbox></mat-checkbox>
+                <mat-checkbox
+                  (change)="__onChangeChkUsersAll($event)"
+                ></mat-checkbox>
               </div>
               <div>상부</div>
               <div class="hidden lg:block">회원수</div>
@@ -100,8 +103,12 @@
                 <div
                   class="unconnected-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
                 >
-                  <div>
-                    <mat-checkbox></mat-checkbox>
+                  <div style="text-align: center">
+                    <mat-checkbox
+                      #chkUsers
+                      [value]="unconnected.id"
+                      (change)="__onChangeChkUsers($event)"
+                    ></mat-checkbox>
                   </div>
                   <div>
                     최상부{{ unconnected.highstRank }}

src/app/modules/admin/member/unconnected/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 {
@@ -71,6 +73,8 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
   @ViewChild(MatPaginator) private _paginator!: MatPaginator;
   @ViewChild(MatSort) private _sort!: MatSort;
 
+  @ViewChildren('chkUsers') chkUsers!: QueryList<MatCheckbox>;
+
   unconnecteds$!: Observable<Unconnected[] | undefined>;
 
   __isSearchOpened = false;
@@ -79,6 +83,8 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
   selectedUnconnected?: Unconnected;
   pagination?: UnconnectedPagination;
 
+  __checkedUsers: string[] = [];
+
   private _unsubscribeAll: Subject<any> = new Subject<any>();
 
   /**
@@ -180,6 +186,27 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
   // @ Private methods
   // -----------------------------------------------------------------------------------------------------
 
+  __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);
+      }
+    });
+  }
+
   /**
    * Create product
    */