버튼수정

src/app/modules/admin/bank/deposit/components/list.component.html

@@ -33,33 +33,6 @@
     </mat-form-field>
     <button mat-flat-button [color]="'primary'">메모저장</button>
   </div>
-
-  <div
-    *ngIf="__checkedDeposits.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>
-      <button
-        mat-flat-button
-        class="bet-mat-small-8"
-        [color]="'primary'"
-        (click)="onClickDeposit(MemberBankDepositState.COMPLETE)"
-      >
-        입금처리
-      </button>
-    </div>
-    <div>
-      <button
-        mat-flat-button
-        class="bet-mat-small-8"
-        [color]="'primary'"
-        (click)="onClickDeposit(MemberBankDepositState.PENDING)"
-      >
-        대기처리
-      </button>
-    </div>
-  </div>
-
   <!-- Search -->
   <div
     *ngIf="__isSearchOpened"
@@ -140,6 +113,33 @@
       </button>
     </div>
   </div>
+
+  <div
+    *ngIf="__checkedDeposits.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>
+      <button
+        mat-flat-button
+        class="bet-mat-small-8"
+        [color]="'primary'"
+        (click)="onClickDeposit(MemberBankDepositState.COMPLETE)"
+      >
+        입금처리
+      </button>
+    </div>
+    <div>
+      <button
+        mat-flat-button
+        class="bet-mat-small-8"
+        [color]="'primary'"
+        (click)="onClickDeposit(MemberBankDepositState.PENDING)"
+      >
+        대기처리
+      </button>
+    </div>
+  </div>
+
   <!-- Main -->
   <div class="flex flex-auto overflow-hidden">
     <!-- Products list -->

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

@@ -85,22 +85,29 @@
         <mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
         <span class="ml-2 mr-1">등록</span>
       </button>
-      <button class="ml-4" mat-flat-button [color]="'primary'">
-        <mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
-        <span class="ml-2 mr-1">숨김</span>
+    </div>
+  </div>
+
+  <div
+    *ngIf="__checkedNotices.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>
+      <button class="bet-mat-small-8" mat-flat-button [color]="'primary'">
+        숨김
       </button>
+    </div>
+    <div>
       <button
-        class="ml-4"
+        class="bet-mat-small-8"
         mat-flat-button
         [color]="'primary'"
         (click)="__onClickRemoveBtn($event, 'id')"
       >
-        <mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
-        <span class="ml-2 mr-1">완전삭제</span>
+        완전삭제
       </button>
     </div>
   </div>
-
   <!-- Main -->
   <div class="flex flex-auto overflow-hidden">
     <!-- Products list -->
@@ -114,8 +121,10 @@
             <div
               class="notice-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 class="hidden lg:block">
-                <mat-checkbox></mat-checkbox>
+              <div>
+                <mat-checkbox
+                  (change)="__onChangeChkNoticesAll($event)"
+                ></mat-checkbox>
               </div>
               <div class="hidden lg:block">번호</div>
               <div class="hidden lg:block">사이트</div>
@@ -139,8 +148,11 @@
                 <div
                   class="notice-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
                 >
-                  <div class="hidden lg:block">
-                    <mat-checkbox></mat-checkbox>
+                  <div>
+                    <mat-checkbox
+                      #chkNotices
+                      (change)="__onChangeChkNotices($event)"
+                    ></mat-checkbox>
                   </div>
                   <!-- 번호 -->
                   <div class="hidden lg:block">

src/app/modules/admin/board/notice/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 {
@@ -66,7 +68,10 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
   @ViewChild(MatPaginator) private _paginator!: MatPaginator;
   @ViewChild(MatSort) private _sort!: MatSort;
 
+  @ViewChildren('chkNotices') chkNotices!: QueryList<MatCheckbox>;
+
   notices$!: Observable<Notice[] | undefined>;
+  __checkedNotices: string[] = [];
 
   isLoading = false;
   searchInputControl = new FormControl();
@@ -197,4 +202,24 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
   __trackByFn(index: number, item: any): any {
     return item.id || index;
   }
+
+  __onChangeChkNoticesAll(event: MatCheckboxChange): void {
+    let checked = event.checked;
+    this.chkNotices.forEach((c, i) => {
+      c.checked = checked;
+    });
+    this.__updateCheckedNotices();
+  }
+  __onChangeChkNotices(event: MatCheckboxChange): void {
+    this.__updateCheckedNotices();
+  }
+
+  __updateCheckedNotices(): void {
+    this.__checkedNotices = [];
+    this.chkNotices.forEach((c, i) => {
+      if (c.checked) {
+        this.__checkedNotices.push(c.value);
+      }
+    });
+  }
 }