공지사항 화면수정

src/app/modules/beteran/compose/compose.module.ts

@@ -9,6 +9,7 @@ import { MatDialogModule } from '@angular/material/dialog';
 import { MatSelectModule } from '@angular/material/select';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatExpansionModule } from '@angular/material/expansion';
+import { MatTableModule } from '@angular/material/table';
 
 import { FuseCardModule } from '@fuse/components/card';
 import { SharedModule } from 'app/shared/shared.module';
@@ -30,6 +31,7 @@ import { COMPOSE } from './compose';
     MatSelectModule,
     MatButtonToggleModule,
     MatExpansionModule,
+    MatTableModule,
 
     FuseCardModule,
     SharedModule,

src/app/modules/beteran/compose/compose/notice-compose.component.html

@@ -11,44 +11,50 @@
       ></mat-icon>
     </button>
   </div>
-  <form
+  <mat-table
-    class="flex flex-col flex-auto p-6 sm:p-8 overflow-y-auto"
+    [dataSource]="dataSource"
-    [formGroup]="composeForm"
+    multiTemplateDataRows
+    class="mat-elevation-z8"
   >
-    <!-- <ng-container *ngIf="notice">
+    <ng-container
-      <ng-container *ngIf="notice.length > 0; else noNotice">
+      matColumnDef="{{ column }}"
-        <div class="grid">
+      *ngFor="let column of columnsToDisplay"
-          <mat-accordion>
+    >
-            <div
+      <mat-header-cell *matHeaderCellDef> {{ column }} </mat-header-cell>
-              class="notice-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-cell *matCellDef="let element"> {{ element[column] }} </mat-cell>
-              style="font-size: x-small"
+    </ng-container>
-            >
-              <span>번호</span>
-              <span>내용</span>
-              <span>날짜</span>
-            </div>
-            <mat-expansion-panel *ngFor="let info of notice">
-              <mat-expansion-panel-header>
-                <span>{{ info.idx }}</span
-                >
-                <span>{{ info.title }}</span>
-                <span>{{ info.applicationDate }}</span>
-              </mat-expansion-panel-header>
-              <div>
-                {{ info.content }}
-              </div>
-            </mat-expansion-panel>
-          </mat-accordion>
-        </div>
-      </ng-container>
-    </ng-container> -->
 
-    <ng-template #noNotice>
+    <ng-container matColumnDef="expandedDetail">
-      <div
+      <mat-cell *matCellDef="let element">
-        class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
+        <div
-      >
+          [@detailExpand]="
-        There are no data!
+            element == expandedElement ? 'expanded' : 'collapsed'
-      </div>
+          "
-    </ng-template>
+        >
-  </form>
+          {{ element.description }}
+        </div>
+      </mat-cell>
+    </ng-container>
+
+    <mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>
+    <mat-row
+      *matRowDef="let element; columns: columnsToDisplay"
+      class="example-element-row"
+      [class.example-expanded-row]="expandedElement === element"
+      (click)="expandedElement = expandedElement === element ? null : element"
+    >
+    </mat-row>
+    <mat-row
+      *matRowDef="let row; columns: ['expandedDetail']"
+      class="example-detail-row"
+    ></mat-row>
+  </mat-table>
+
+  <ng-template #noNotice>
+    <div
+      class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
+    >
+      There are no data!
+    </div>
+  </ng-template>
 </div>

src/app/modules/beteran/compose/compose/notice-compose.component.ts

@@ -1,18 +1,23 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { MatDialogRef } from '@angular/material/dialog';
+import {
+  animate,
+  state,
+  style,
+  transition,
+  trigger,
+} from '@angular/animations';
 
 @Component({
   selector: 'notice-compose',
   templateUrl: './notice-compose.component.html',
-  styles: [
+
-    /* language=SCSS */
+  animations: [
-    `
+    trigger('detailExpand', [
-      .notice-grid {
+      state('collapsed', style({ height: '0px', minHeight: '0' })),
-        /*                      번호   내용  날짜   */
+      state('expanded', style({ height: '*', minHeight: '*' })),
-        grid-template-columns: 100px 250px 100px;
+    ]),
-      }
-    `,
   ],
   encapsulation: ViewEncapsulation.None,
 })
@@ -29,6 +34,9 @@ export class NoticeComposeComponent implements OnInit {
       ['clean'],
     ],
   };
+  dataSource = ELEMENT_DATA;
+  columnsToDisplay = ['idx', 'content', 'applicationDate'];
+  expandedElement: PeriodicElement | null | undefined;
 
   /**
    * Constructor
@@ -38,21 +46,6 @@ export class NoticeComposeComponent implements OnInit {
     private _formBuilder: FormBuilder
   ) {}
 
-  notice = [
-    {
-      idx: '1',
-      title: '계좌등록안내',
-      contents: '안녕하세요. 운영진입니다dkfjkjdfkjdkfjfkjdkjkdfjdkjk',
-      applicationDate: '2022.08.23',
-    },
-    {
-      idx: '2',
-      title: '오토프로그램 이용안내',
-      contents: '안녕하세요. 운영진입니다',
-      applicationDate: '2022.08.23',
-    },
-  ];
-
   // -----------------------------------------------------------------------------------------------------
   // @ Lifecycle hooks
   // -----------------------------------------------------------------------------------------------------
@@ -60,16 +53,7 @@ export class NoticeComposeComponent implements OnInit {
   /**
    * On init
    */
-  ngOnInit(): void {
+  ngOnInit(): void {}
-    // Create the form
-    this.composeForm = this._formBuilder.group({
-      to: ['', [Validators.required, Validators.email]],
-      cc: ['', [Validators.email]],
-      bcc: ['', [Validators.email]],
-      subject: [''],
-      body: ['', [Validators.required]],
-    });
-  }
 
   // -----------------------------------------------------------------------------------------------------
   // @ Public methods
@@ -115,14 +99,32 @@ export class NoticeComposeComponent implements OnInit {
    * Send the message
    */
   send(): void {}
-
-  /**
-   * Track by function for ngFor loops
-   *
-   * @param index
-   * @param item
-   */
-  __trackByFn(index: number, item: any): any {
-    return item.id || index;
-  }
 }
+
+export interface PeriodicElement {
+  idx: number;
+  content: string;
+  applicationDate: string;
+  description: string;
+}
+
+const ELEMENT_DATA: PeriodicElement[] = [
+  {
+    idx: 1,
+    content: '계좌등록안내',
+    applicationDate: '2022-08-23',
+    description: `안녕하세요. 운영진입니다.`,
+  },
+  {
+    idx: 2,
+    content: '오토프로그램 이용 안내',
+    applicationDate: '2022-08-23',
+    description: `하단이미지를 참고해주시기바랍니다`,
+  },
+  {
+    idx: 3,
+    content: '입출금 규정 안내',
+    applicationDate: '2022-08-23',
+    description: `입금해라입금. 출금해라출금 이로이로ㅓㅁ;ㅇ롱러;올;ㅣㅁㄴ더ㅗ래;ㄷ로ㅑ`,
+  },
+];