회원조회 및 회원정보 수정 화면

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

@@ -77,6 +77,34 @@
       </div>
       <!-- Actions -->
       <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
+        <div *ngIf="!!loggedIn">
+          <div class="grid grid-cols-2 gap-x-4 gap-y-1 ml-auto">
+            <div
+              class="justify-self-end font-medium tracking-tight text-secondary"
+            >
+              회원아이디
+            </div>
+            <div class="font-medium">test님</div>
+            <div
+              class="justify-self-end font-medium tracking-tight text-secondary"
+            >
+              보유금액
+            </div>
+            <div class="font-medium">74,100원</div>
+            <div
+              class="justify-self-end font-medium tracking-tight text-secondary"
+            >
+              콤프
+            </div>
+            <div class="font-medium">3,100P</div>
+            <div
+              class="justify-self-end font-medium tracking-tight text-secondary"
+            >
+              쪽지
+            </div>
+            <div class="font-medium">(0)</div>
+          </div>
+        </div>
         <!-- Search -->
 
         <button
@@ -85,23 +113,28 @@
           [color]="'primary'"
           (click)="
             __onClickCompose(
-              !!loggedIn ? composeMenuType.signOut : composeMenuType.signIn
+              !loggedIn ? composeMenuType.signIn : composeMenuType.modifyMember
             )
           "
         >
           <mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
-          <span class="ml-2 mr-1">{{ !loggedIn ? "로그인" : "로그아웃" }}</span>
+          <span class="ml-2 mr-1">{{ !loggedIn ? "로그인" : "정보수정" }}</span>
         </button>
 
         <button
-          *ngIf="!loggedIn"
           class="ml-4"
           mat-flat-button
           [color]="'primary'"
-          (click)="__onClickCompose(composeMenuType.signup)"
+          (click)="
+            __onClickCompose(
+              !loggedIn ? composeMenuType.signup : composeMenuType.signOut
+            )
+          "
         >
           <mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
-          <span class="ml-2 mr-1">회원가입</span>
+          <span class="ml-2 mr-1">{{
+            !loggedIn ? "회원가입" : "로그아웃"
+          }}</span>
         </button>
       </div>
     </div>

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

@@ -25,12 +25,14 @@ import { VendorService } from 'app/modules/polyglot/api/services/vendor.service'
 import { ListGamesResponse } from 'app/modules/proto/c2se/api/game_pb';
 import { Game } from 'app/modules/proto/models/api/game_pb';
 import { Vendor } from 'app/modules/proto/models/api/vendor_pb';
+import { ModifyMemberComposeComponent } from '../compose/compose/modify-member-compose.component';
 import { SlotGameComposeComponent } from '../compose/compose/slot-game-compose.component';
 
 export enum ComposeMenuType {
-  signIn = 'signIn',
+  signIn = 'SignIn',
-  signup = 'signup',
+  signup = 'Signup',
-  signOut = 'signOut',
+  signOut = 'SignOut',
+  modifyMember = 'ModifyMember',
   deposit = 'Deposit',
   withdraw = 'Withdraw',
   notice = 'Notice',
@@ -98,6 +100,8 @@ export class HomeComponent implements OnInit {
   ) {}
 
   ngOnInit(): void {
+    if (!!this.loggedIn) {
+    }
     this._vendorService.listVendors().then((result) => {
       this.liveCasinos = result
         .getVendorsList()
@@ -172,6 +176,9 @@ export class HomeComponent implements OnInit {
       case ComposeMenuType.signup:
         selectType = SignUpComposeComponent;
         break;
+      case ComposeMenuType.modifyMember:
+        selectType = ModifyMemberComposeComponent;
+        break;
       case ComposeMenuType.deposit:
         selectType = DepositComposeComponent;
         break;

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

@@ -8,6 +8,7 @@ import { WithdrawHistoryComposeComponent } from './withdraw-history-compose.comp
 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';
 
 export const COMPOSE = [
   DepositComposeComponent,
@@ -20,4 +21,5 @@ export const COMPOSE = [
   SignUpComposeComponent,
   SignInComposeComponent,
   SlotGameComposeComponent,
+  ModifyMemberComposeComponent,
 ];

src/app/modules/beteran/compose/compose/modify-member-compose.component.html

@@ -0,0 +1,131 @@
+<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>
+
+  <fuse-alert
+    class="mt-8 -mb-4"
+    *ngIf="showAlert"
+    [appearance]="'outline'"
+    [showIcon]="false"
+    [type]="alert.type"
+    [@shake]="alert.type === 'error'"
+  >
+    {{ alert.message }}
+  </fuse-alert>
+
+  <div class="flex-auto p-6 sm:p-10">
+    <div class="max-w-3xl">
+      <div class="flex flex-col p-8 pt-0">
+        <!-- Compose form -->
+        <form
+          class="flex flex-col items-start overflow-y-auto"
+          [formGroup]="modifyMemberComposeForm"
+        >
+          <!-- 아이디 -->
+
+          <div class="flex flex-col w-full">
+            <div class="flex items-center w-full mt-6">
+              <!-- Icon name -->
+              <mat-form-field class="w-1/3 pr-2">
+                <mat-label>아이디</mat-label>
+                <input matInput [formControlName]="'username'" />
+              </mat-form-field>
+
+              <!-- Icon color -->
+              <!-- 닉네임 -->
+              <mat-form-field class="w-1/3 pl-2">
+                <mat-label>닉네임</mat-label>
+                <input matInput [formControlName]="'nickname'" />
+              </mat-form-field>
+              <mat-form-field class="w-1/3 pl-2">
+                <mat-label>현재 비밀번호</mat-label>
+                <input matInput [formControlName]="'currentPassword'" />
+              </mat-form-field>
+            </div>
+          </div>
+
+          <div class="flex flex-col w-full">
+            <div class="flex items-center w-full mt-6">
+              <!-- 비밀번호 -->
+              <mat-form-field class="w-1/2 pr-2">
+                <mat-label>비밀번호</mat-label>
+                <input matInput [formControlName]="'password'" />
+                <mat-error
+                  *ngIf="
+                    modifyMemberComposeForm
+                      ?.get('password')
+                      ?.hasError('required')
+                  "
+                >
+                  비밀번호는 필수 입력입니다.
+                </mat-error>
+              </mat-form-field>
+
+              <!-- 비밀번호 확인 -->
+              <mat-form-field class="w-1/2 pl-2">
+                <mat-label>비밀번호 확인</mat-label>
+                <input matInput [formControlName]="'passwordConfirm'" />
+                <mat-error
+                  *ngIf="
+                    modifyMemberComposeForm
+                      ?.get('passwordConfirm')
+                      ?.hasError('required')
+                  "
+                >
+                  비밀번호 확인은 필수 입력입니다.
+                </mat-error>
+                <mat-error
+                  *ngIf="
+                    modifyMemberComposeForm
+                      ?.get('passwordConfirm')
+                      ?.hasError('passwordNotMatch')
+                  "
+                >
+                  비밀번호가 동일하지 않습니다.
+                </mat-error>
+              </mat-form-field>
+            </div>
+          </div>
+
+          <!-- Actions -->
+          <div
+            class="flex flex-col sm:flex-row sm:items-center justify-between mt-4 sm:mt-6"
+            style="align-items: center"
+          >
+            <div class="flex items-center mt-4 sm:mt-0">
+              <!-- Discard -->
+              <button
+                class="ml-auto sm:ml-0"
+                mat-stroked-button
+                (click)="discard()"
+              >
+                취소
+              </button>
+
+              <!-- Send -->
+              <button
+                class="order-first sm:order-last"
+                mat-flat-button
+                [color]="'primary'"
+                (click)="send()"
+                [disabled]="isSendDisable"
+              >
+                회원가입
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>

src/app/modules/beteran/compose/compose/modify-member-compose.component.ts

@@ -0,0 +1,156 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import {
+  AbstractControl,
+  FormBuilder,
+  FormGroup,
+  ValidatorFn,
+  Validators,
+} from '@angular/forms';
+import { MatDialogRef } from '@angular/material/dialog';
+import { fuseAnimations } from '@fuse/animations';
+import { FuseAlertType } from '@fuse/components/alert';
+import { BankService } from 'app/modules/polyglot/bank/services/bank.service';
+import { IdentityService } from 'app/modules/polyglot/identity/services/identity.service';
+import { MemberService } from 'app/modules/polyglot/member/services/member.service';
+import { MemberReferrerService } from 'app/modules/polyglot/member_referrer/services/member_referrer.service';
+import {
+  CreateMemberRequest,
+  CreateMemberResponse,
+  UpdateMemberForPasswordRequest,
+  UpdateMemberForPasswordResponse,
+} from 'app/modules/proto/c2se/member_pb';
+
+@Component({
+  selector: 'modify-member-compose',
+  templateUrl: './modify-member-compose.component.html',
+  encapsulation: ViewEncapsulation.None,
+  animations: fuseAnimations,
+})
+export class ModifyMemberComposeComponent implements OnInit {
+  modifyMemberComposeForm!: FormGroup;
+
+  isSendDisable = false;
+
+  alert: { type: FuseAlertType; message: string } = {
+    type: 'success',
+    message: '수정이 성공하였습니다.',
+  };
+
+  showAlert: boolean = false;
+
+  /**
+   * Constructor
+   */
+  constructor(
+    public matDialogRef: MatDialogRef<ModifyMemberComposeComponent>,
+    private _formBuilder: FormBuilder,
+    private _identityService: IdentityService,
+    private _memberService: MemberService,
+    private _memberReferrerService: MemberReferrerService
+  ) {}
+
+  // -----------------------------------------------------------------------------------------------------
+  // @ Lifecycle hooks
+  // -----------------------------------------------------------------------------------------------------
+
+  /**
+   * On init
+   */
+  ngOnInit(): void {
+    // Create the form
+    this.modifyMemberComposeForm = this._formBuilder.group({
+      username: [{ value: '', disabled: true }],
+      nickname: [{ value: '', disabled: true }],
+      currentPassword: ['1234', [Validators.required]],
+      password: ['1234', [Validators.required]],
+      passwordConfirm: [
+        '1234',
+        [Validators.required, this.checkSameForPassword()],
+      ],
+    });
+  }
+
+  // -----------------------------------------------------------------------------------------------------
+  // @ 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 {
+    if (!this.modifyMemberComposeForm?.valid) {
+      return;
+    }
+
+    this.isSendDisable = true;
+
+    const { username, nickname, currentPassword, password, passwordConfirm } =
+      this.modifyMemberComposeForm?.value;
+
+    this._memberService
+      .updateMemberForPassword('', password)
+      .then((res: UpdateMemberForPasswordResponse.Result) => {
+        this.showAlert = true;
+      })
+      .catch((e) => {
+        this.showAlert = true;
+        this.alert = { type: 'error', message: '수정에 실패하였습니다.' };
+      })
+      .finally(() => setTimeout(() => this.close(), 5000));
+  }
+
+  __checkCurrentPassword(event: FocusEvent): void {
+    const code = this.modifyMemberComposeForm.get('currentPassword')?.value;
+
+    // this._memberReferrerService.getMemberReferrerByCode(code).then((result) => {
+    //   if (!result.getMemberReferrer()) {
+    //     this.modifyMemberComposeForm
+    //       ?.get('referalCode')
+    //       ?.setErrors({ notExistReferalCode: true });
+    //   }
+    // });
+  }
+
+  close(): void {
+    this.matDialogRef.close({
+      choice: true,
+    });
+  }
+
+  private checkSameForPassword(): ValidatorFn {
+    return (control: AbstractControl): { [key: string]: any } | null => {
+      if (!control || !control.value || control.value === '') {
+        return null;
+      }
+      const password = this.modifyMemberComposeForm?.get('password')
+        ?.value as string;
+      const passwordConfirm = control.value as string;
+
+      if (password !== passwordConfirm) {
+        return { passwordNotMatch: true };
+      }
+      return null;
+    };
+  }
+}