쪽지함 화면 수정

src/app/modules/beteran/component/home.component.html

@@ -102,7 +102,11 @@
             >
               쪽지
             </div>
-            <div class="font-medium">(0)</div>
+            <div class="font-medium">
+              <button (click)="__onClickMessage($event)">
+                <mat-icon svgIcon="email-outline"></mat-icon></button
+              >(0)
+            </div>
           </div>
         </div>
         <!-- Search -->

src/app/modules/beteran/component/home.component.ts

@@ -28,6 +28,7 @@ import { Vendor } from 'app/modules/proto/models/api/vendor_pb';
 import { environment } from 'environments/environment';
 import { ModifyMemberComposeComponent } from '../compose/compose/modify-member-compose.component';
 import { SlotGameComposeComponent } from '../compose/compose/slot-game-compose.component';
+import { MessageComposeComponent } from '../compose/compose/message-compose.component';
 
 export enum ComposeMenuType {
   signIn = 'SignIn',
@@ -312,4 +313,10 @@ export class HomeComponent implements OnInit {
         });
     });
   }
+
+  __onClickMessage(event: MouseEvent): void {
+    const dialogRef = this._matDialog.open(MessageComposeComponent, {
+      data: { price: '', memo: '' },
+    });
+  }
 }

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

@@ -10,6 +10,7 @@ import { SignUpComposeComponent } from './sign-up-compose.component';
 import { SignInComposeComponent } from './sign-in-compose.component';
 import { SlotGameComposeComponent } from './slot-game-compose.component';
 import { ModifyMemberComposeComponent } from './modify-member-compose.component';
+import { MessageComposeComponent } from './message-compose.component';
 
 export const COMPOSE = [
   DepositComposeComponent,
@@ -24,4 +25,5 @@ export const COMPOSE = [
   SignInComposeComponent,
   SlotGameComposeComponent,
   ModifyMemberComposeComponent,
+  MessageComposeComponent,
 ];

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

@@ -0,0 +1,74 @@
+<div class="flex flex-col max-w-240 md:min-w-160 max-h-screen -m-6">
+  <!-- Header -->
+  <div
+    class="flex flex-0 items-center justify-between h-16 pr-3 sm:pr-5 pl-6 sm:pl-8 bg-primary text-on-primary"
+  >
+    <div class="text-lg font-medium">쪽지함</div>
+    <button mat-icon-button (click)="saveAndClose()" [tabIndex]="-1">
+      <mat-icon
+        class="text-current"
+        [svgIcon]="'heroicons_outline:x'"
+      ></mat-icon>
+    </button>
+  </div>
+  <form
+    class="flex flex-col flex-auto p-6 sm:p-8 overflow-y-auto"
+    [formGroup]="composeForm"
+  >
+    <mat-table
+      [dataSource]="dataSource"
+      multiTemplateDataRows
+      class="mat-elevation-z8"
+    >
+      <ng-container
+        matColumnDef="{{ column }}"
+        *ngFor="let column of columnsToDisplay"
+      >
+        <mat-header-cell *matHeaderCellDef> {{ column }} </mat-header-cell>
+        <mat-cell *matCellDef="let element"> {{ element[column] }} </mat-cell>
+      </ng-container>
+
+      <ng-container matColumnDef="expandedDetail">
+        <mat-cell *matCellDef="let element">
+          <div
+            [@detailExpand]="
+              element == expandedElement ? 'expanded' : 'collapsed'
+            "
+          >
+            {{ 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"
+        style="min-height: 0"
+      ></mat-row>
+    </mat-table>
+    <div class="flex flex-col sm:flex-row sm:items-center mt-4 sm:mt-6">
+      <div class="flex mt-4 sm:mt-0">
+        <!-- Save as draft -->
+        <button class="sm:mx-3" mat-stroked-button>
+          <span>전체읽음처리</span>
+        </button>
+        <!-- Send -->
+        <button
+          class="order-first sm:order-last"
+          mat-flat-button
+          [color]="'primary'"
+        >
+          전체삭제처리
+        </button>
+      </div>
+    </div>
+  </form>
+</div>

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

@@ -0,0 +1,120 @@
+import {
+  trigger,
+  state,
+  style,
+  transition,
+  animate,
+} from '@angular/animations';
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { MatDialogRef } from '@angular/material/dialog';
+import { MatDialog } from '@angular/material/dialog';
+import { CustomerRegistrationComposeComponent } from './customer-registration-compose.component';
+
+@Component({
+  selector: 'message-compose',
+  templateUrl: './message-compose.component.html',
+  animations: [
+    trigger('detailExpand', [
+      state('collapsed', style({ height: '0px', minHeight: '0' })),
+      state('expanded', style({ height: '*', minHeight: '50px' })),
+      transition(
+        'expanded <=> collapsed',
+        animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')
+      ),
+    ]),
+  ],
+})
+export class MessageComposeComponent implements OnInit {
+  composeForm!: FormGroup;
+
+  dataSource = ELEMENT_DATA;
+  columnsToDisplay = ['state', 'content', 'delete', 'applicationDate'];
+  expandedElement: PeriodicElement | null | undefined;
+
+  /**
+   * Constructor
+   */
+  constructor(
+    public matDialogRef: MatDialogRef<MessageComposeComponent>,
+    private _formBuilder: FormBuilder,
+    private _matDialog: MatDialog
+  ) {}
+
+  // -----------------------------------------------------------------------------------------------------
+  // @ Lifecycle hooks
+  // -----------------------------------------------------------------------------------------------------
+
+  /**
+   * On init
+   */
+  ngOnInit(): void {
+    // Create the form
+    this.composeForm = this._formBuilder.group({
+      accountHolder: ['', [Validators.required]],
+      amount: ['', [Validators.required]],
+    });
+  }
+
+  // -----------------------------------------------------------------------------------------------------
+  // @ Public methods
+  // -----------------------------------------------------------------------------------------------------
+
+  /**
+   * Save and close
+   */
+  saveAndClose(): void {
+    // Save the message as a draft
+    this.saveAsDraft();
+
+    // Close the dialog
+    this.matDialogRef.close();
+  }
+
+  /**
+   * Discard the message
+   */
+  discard(): void {}
+
+  /**
+   * Save the message as a draft
+   */
+  saveAsDraft(): void {}
+
+  /**
+   * Send the message
+   */
+  send(): void {}
+}
+
+export interface PeriodicElement {
+  state: string;
+  content: string;
+  delete: string;
+  applicationDate: string;
+  description: string;
+}
+
+const ELEMENT_DATA: PeriodicElement[] = [
+  {
+    state: '읽지않음',
+    content: '쪽지받아',
+    delete: '삭제하기',
+    applicationDate: '2022-08-23',
+    description: `입금계좌를 알려달라`,
+  },
+  {
+    state: '읽음',
+    content: '쪽지읽어랏',
+    delete: '삭제하기',
+    applicationDate: '2022-08-23',
+    description: `하단이미지를 참고해주시기바랍니다`,
+  },
+  {
+    state: '읽지않음',
+    content: '함하맣마하맣ㅁ',
+    delete: '삭제하기',
+    applicationDate: '2022-08-23',
+    description: `입금해라입금. 출금해라출금 이로이로ㅓㅁ;ㅇ롱러;올;ㅣㅁㄴ더ㅗ래;ㄷ로ㅑ`,
+  },
+];