공지사항, 고객센터, 문의하기 화면수정

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

@@ -3,7 +3,7 @@
   <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">customer</div>
+    <div class="text-lg font-medium">고객센터</div>
     <button mat-icon-button (click)="saveAndClose()" [tabIndex]="-1">
       <mat-icon
         class="text-current"
@@ -11,111 +11,63 @@
       ></mat-icon>
     </button>
   </div>
-
-  <!-- Compose form -->
   <form
     class="flex flex-col flex-auto p-6 sm:p-8 overflow-y-auto"
     [formGroup]="composeForm"
   >
-    <!-- To -->
-    <mat-form-field>
-      <mat-label>To</mat-label>
-      <input matInput [formControlName]="'to'" />
-      <div class="copy-fields-toggles" matSuffix>
-        <span
-          class="text-sm font-medium cursor-pointer select-none hover:underline"
-          *ngIf="!copyFields.cc"
-          (click)="showCopyField('cc')"
-        >
-          Cc
-        </span>
-        <span
-          class="ml-2 text-sm font-medium cursor-pointer select-none hover:underline"
-          *ngIf="!copyFields.bcc"
-          (click)="showCopyField('bcc')"
-        >
-          Bcc
-        </span>
-      </div>
-    </mat-form-field>
-
-    <!-- Cc -->
-    <mat-form-field *ngIf="copyFields.cc">
-      <mat-label>Cc</mat-label>
-      <input matInput [formControlName]="'cc'" />
-    </mat-form-field>
-
-    <!-- Bcc -->
-    <mat-form-field *ngIf="copyFields.bcc">
-      <mat-label>Bcc</mat-label>
-      <input matInput [formControlName]="'bcc'" />
-    </mat-form-field>
-
-    <!-- Subject -->
-    <mat-form-field>
-      <mat-label>Subject</mat-label>
-      <input matInput [formControlName]="'subject'" />
-    </mat-form-field>
-
-    <!-- Body -->
-    <!-- <quill-editor
-      class="mt-2"
-      [formControlName]="'body'"
-      [modules]="quillModules"
-    ></quill-editor> -->
-
-    <!-- Actions -->
-    <div
-      class="flex flex-col sm:flex-row sm:items-center justify-between mt-4 sm:mt-6"
+    <mat-table
+      [dataSource]="dataSource"
+      multiTemplateDataRows
+      class="mat-elevation-z8"
     >
-      <div class="-ml-2">
-        <!-- Attach file -->
-        <button mat-icon-button>
-          <mat-icon
-            class="icon-size-5"
-            [svgIcon]="'heroicons_solid:paper-clip'"
-          ></mat-icon>
-        </button>
-        <!-- Insert link -->
-        <button mat-icon-button>
-          <mat-icon
-            class="icon-size-5"
-            [svgIcon]="'heroicons_solid:link'"
-          ></mat-icon>
-        </button>
-        <!-- Insert emoji -->
-        <button mat-icon-button>
-          <mat-icon
-            class="icon-size-5"
-            [svgIcon]="'heroicons_solid:emoji-happy'"
-          ></mat-icon>
-        </button>
-        <!-- Insert image -->
-        <button mat-icon-button>
-          <mat-icon
-            class="icon-size-5"
-            [svgIcon]="'heroicons_solid:photograph'"
-          ></mat-icon>
-        </button>
-      </div>
+      <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>
 
-      <div class="flex items-center mt-4 sm:mt-0">
-        <!-- Discard -->
-        <button class="ml-auto sm:ml-0" mat-stroked-button (click)="discard()">
-          Discard
-        </button>
+      <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 (click)="saveAsDraft()">
-          <span>Save as draft</span>
+        <button class="sm:mx-3" mat-stroked-button>
+          <span>빠른계좌문의</span>
         </button>
         <!-- Send -->
         <button
           class="order-first sm:order-last"
           mat-flat-button
           [color]="'primary'"
-          (click)="send()"
+          (click)="__onClickRegistration($event)"
         >
-          Send
+          문의하기
         </button>
       </div>
     </div>

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

@@ -1,31 +1,44 @@
-import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+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: 'customer-compose',
   templateUrl: './customer-compose.component.html',
-  encapsulation: ViewEncapsulation.None,
+  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 CustomerComposeComponent implements OnInit {
   composeForm!: FormGroup;
-  copyFields: { cc: boolean; bcc: boolean } = {
-    cc: false,
-    bcc: false,
-  };
-  quillModules: any = {
-    toolbar: [
-      ['bold', 'italic', 'underline'],
-      [{ align: [] }, { list: 'ordered' }, { list: 'bullet' }],
-      ['clean'],
-    ],
-  };
+
+  dataSource = ELEMENT_DATA;
+  columnsToDisplay = ['state', 'content', 'applicationDate'];
+  expandedElement: PeriodicElement | null | undefined;
+
   /**
    * Constructor
    */
   constructor(
     public matDialogRef: MatDialogRef<CustomerComposeComponent>,
-    private _formBuilder: FormBuilder
+    private _formBuilder: FormBuilder,
+    private _matDialog: MatDialog
   ) {}
 
   // -----------------------------------------------------------------------------------------------------
@@ -38,11 +51,8 @@ export class CustomerComposeComponent implements OnInit {
   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]],
+      accountHolder: ['', [Validators.required]],
+      amount: ['', [Validators.required]],
     });
   }
 
@@ -50,21 +60,6 @@ export class CustomerComposeComponent implements OnInit {
   // @ Public methods
   // -----------------------------------------------------------------------------------------------------
 
-  /**
-   * Show the copy field with the given field name
-   *
-   * @param name
-   */
-  showCopyField(name: string): void {
-    // Return if the name is not one of the available names
-    if (name !== 'cc' && name !== 'bcc') {
-      return;
-    }
-
-    // Show the field
-    this.copyFields[name] = true;
-  }
-
   /**
    * Save and close
    */
@@ -90,4 +85,41 @@ export class CustomerComposeComponent implements OnInit {
    * Send the message
    */
   send(): void {}
+
+  __onClickRegistration(event: MouseEvent): void {
+    const dialogRef = this._matDialog.open(
+      CustomerRegistrationComposeComponent,
+      {
+        data: { price: '', memo: '' },
+      }
+    );
+  }
 }
+
+export interface PeriodicElement {
+  state: string;
+  content: string;
+  applicationDate: string;
+  description: string;
+}
+
+const ELEMENT_DATA: PeriodicElement[] = [
+  {
+    state: '답변대기중',
+    content: '입금계좌문의',
+    applicationDate: '2022-08-23',
+    description: `입금계좌를 알려달라`,
+  },
+  {
+    state: '답변대기중',
+    content: '오토프로그램 이용 안내',
+    applicationDate: '2022-08-23',
+    description: `하단이미지를 참고해주시기바랍니다`,
+  },
+  {
+    state: '답변대기중',
+    content: '입출금 규정 안내',
+    applicationDate: '2022-08-23',
+    description: `입금해라입금. 출금해라출금 이로이로ㅓㅁ;ㅇ롱러;올;ㅣㅁㄴ더ㅗ래;ㄷ로ㅑ`,
+  },
+];

src/app/modules/beteran/compose/compose/customer-registration-compose.component.html

@@ -0,0 +1,52 @@
+<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"
+  >
+    <div>
+      <mat-form-field
+        class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full"
+      >
+        <mat-label>제목</mat-label>
+        <input matInput [formControlName]="'title'" />
+      </mat-form-field>
+    </div>
+    <mat-form-field
+      class="mt-8 fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full"
+    >
+      <textarea
+        matInput
+        [required]="true"
+        [rows]="5"
+        matTextareaAutosize
+        [formControlName]="'content'"
+      ></textarea>
+      <mat-label>내용</mat-label>
+    </mat-form-field>
+    <div class="flex flex-col sm:flex-row sm:items-center mt-4 sm:mt-6">
+      <div class="flex mt-4 sm:mt-0">
+        <!-- Send -->
+        <button
+          class="order-first sm:order-last"
+          mat-flat-button
+          [color]="'primary'"
+          (click)="send()"
+        >
+          문의하기
+        </button>
+      </div>
+    </div>
+  </form>
+</div>

src/app/modules/beteran/compose/compose/customer-registration-compose.component.ts

@@ -0,0 +1,114 @@
+import {
+  animate,
+  state,
+  style,
+  transition,
+  trigger,
+} from '@angular/animations';
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { MatDialogRef } from '@angular/material/dialog';
+
+@Component({
+  selector: 'customer-registration-compose',
+  templateUrl: './customer-registration-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 CustomerRegistrationComposeComponent implements OnInit {
+  composeForm!: FormGroup;
+
+  dataSource = ELEMENT_DATA;
+  columnsToDisplay = ['idx', 'content', 'applicationDate'];
+  expandedElement: PeriodicElement | null | undefined;
+
+  /**
+   * Constructor
+   */
+  constructor(
+    public matDialogRef: MatDialogRef<CustomerRegistrationComposeComponent>,
+    private _formBuilder: FormBuilder
+  ) {}
+
+  // -----------------------------------------------------------------------------------------------------
+  // @ 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 {
+  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: `입금해라입금. 출금해라출금 이로이로ㅓㅁ;ㅇ롱러;올;ㅣㅁㄴ더ㅗ래;ㄷ로ㅑ`,
+  },
+];

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

@@ -3,6 +3,7 @@ import { CustomerComposeComponent } from './customer-compose.component';
 import { DepositComposeComponent } from './deposit-compose.component';
 import { DepositHistoryComposeComponent } from './deposit-history-compose.component';
 import { NoticeComposeComponent } from './notice-compose.component';
+import { CustomerRegistrationComposeComponent } from './customer-registration-compose.component';
 import { WithdrawComposeComponent } from './withdraw-compose.component';
 import { WithdrawHistoryComposeComponent } from './withdraw-history-compose.component';
 import { SignUpComposeComponent } from './sign-up-compose.component';
@@ -18,6 +19,7 @@ export const COMPOSE = [
   DepositHistoryComposeComponent,
   WithdrawHistoryComposeComponent,
   NoticeComposeComponent,
+  CustomerRegistrationComposeComponent,
   SignUpComposeComponent,
   SignInComposeComponent,
   SlotGameComposeComponent,

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

@@ -11,50 +11,50 @@
       ></mat-icon>
     </button>
   </div>
-  <mat-table
-    [dataSource]="dataSource"
-    multiTemplateDataRows
-    class="mat-elevation-z8"
+  <form
+    class="flex flex-col flex-auto p-6 sm:p-8 overflow-y-auto"
+    [formGroup]="composeForm"
   >
-    <ng-container
-      matColumnDef="{{ column }}"
-      *ngFor="let column of columnsToDisplay"
+    <mat-table
+      [dataSource]="dataSource"
+      multiTemplateDataRows
+      class="mat-elevation-z8"
     >
-      <mat-header-cell *matHeaderCellDef> {{ column }} </mat-header-cell>
-      <mat-cell *matCellDef="let element"> {{ element[column] }} </mat-cell>
-    </ng-container>
+      <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>
+      <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"
-    ></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>
+      <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>
+  </form>
 </div>

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

@@ -1,6 +1,3 @@
-import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { MatDialogRef } from '@angular/material/dialog';
 import {
   animate,
   state,
@@ -8,6 +5,9 @@ import {
   transition,
   trigger,
 } from '@angular/animations';
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { MatDialogRef } from '@angular/material/dialog';
 
 @Component({
   selector: 'notice-compose',
@@ -16,24 +16,17 @@ import {
   animations: [
     trigger('detailExpand', [
       state('collapsed', style({ height: '0px', minHeight: '0' })),
-      state('expanded', style({ height: '*', minHeight: '*' })),
+      state('expanded', style({ height: '*', minHeight: '50px' })),
+      transition(
+        'expanded <=> collapsed',
+        animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')
+      ),
     ]),
   ],
-  encapsulation: ViewEncapsulation.None,
 })
 export class NoticeComposeComponent implements OnInit {
   composeForm!: FormGroup;
-  copyFields: { cc: boolean; bcc: boolean } = {
-    cc: false,
-    bcc: false,
-  };
-  quillModules: any = {
-    toolbar: [
-      ['bold', 'italic', 'underline'],
-      [{ align: [] }, { list: 'ordered' }, { list: 'bullet' }],
-      ['clean'],
-    ],
-  };
+
   dataSource = ELEMENT_DATA;
   columnsToDisplay = ['idx', 'content', 'applicationDate'];
   expandedElement: PeriodicElement | null | undefined;
@@ -53,27 +46,18 @@ export class NoticeComposeComponent implements OnInit {
   /**
    * On init
    */
-  ngOnInit(): void {}
+  ngOnInit(): void {
+    // Create the form
+    this.composeForm = this._formBuilder.group({
+      accountHolder: ['', [Validators.required]],
+      amount: ['', [Validators.required]],
+    });
+  }
 
   // -----------------------------------------------------------------------------------------------------
   // @ Public methods
   // -----------------------------------------------------------------------------------------------------
 
-  /**
-   * Show the copy field with the given field name
-   *
-   * @param name
-   */
-  showCopyField(name: string): void {
-    // Return if the name is not one of the available names
-    if (name !== 'cc' && name !== 'bcc') {
-      return;
-    }
-
-    // Show the field
-    this.copyFields[name] = true;
-  }
-
   /**
    * Save and close
    */