회원가입 진행중

src/app/modules/user/main/compose/sign-up-compose.component.html

@@ -16,15 +16,20 @@
     <div class="max-w-3xl">
       <div class="flex flex-col p-8 pt-0">
         <!-- Compose form -->
-        <form class="flex flex-col items-start" [formGroup]="composeForm">
+        <form
+          class="flex flex-col items-start overflow-y-auto"
+          [formGroup]="signupComposeForm"
+        >
           <!-- 아이디 -->
 
-          <mat-form-field
+          <mat-form-field class="w-full mt-6">
-            class="fuse-mat-no-subscript fuse-mat-textarea w-full mt-6"
-          >
             <mat-label>추천인 코드</mat-label>
-            <input matInput />
+            <input matInput [formControlName]="'referalCode'" />
-            <div class="copy-fields-toggles" matSuffix></div>
+            <mat-error
+              *ngIf="signupComposeForm.get('referalCode')?.hasError('required')"
+            >
+              추천인 코드는 필수 입력입니다.
+            </mat-error>
           </mat-form-field>
 
           <!-- Divider -->
@@ -33,18 +38,56 @@
           <div class="flex flex-col w-full">
             <div class="flex items-center w-full mt-6">
               <!-- Icon name -->
-              <mat-form-field class="fuse-mat-no-subscript w-1/2 pr-2">
+              <mat-form-field class="w-1/2 pr-2">
                 <mat-label>아이디</mat-label>
-                <input matInput [formControlName]="'signInId'" />
+                <input
-                <div class="copy-fields-toggles" matSuffix></div>
+                  matInput
+                  [formControlName]="'username'"
+                  (focusout)="__checkUsernameDuplicate($event)"
+                />
+                <mat-error
+                  *ngIf="
+                    signupComposeForm.get('username')?.hasError('required')
+                  "
+                >
+                  아이디는 필수 입력입니다.
+                </mat-error>
+                <mat-error
+                  *ngIf="
+                    signupComposeForm
+                      .get('username')
+                      ?.hasError('usernameDuplicate')
+                  "
+                >
+                  아이디가 중복됩니다.
+                </mat-error>
               </mat-form-field>
 
               <!-- Icon color -->
               <!-- 닉네임 -->
-              <mat-form-field class="fuse-mat-no-subscript w-1/2 pl-2">
+              <mat-form-field class="w-1/2 pl-2">
                 <mat-label>닉네임</mat-label>
-                <input matInput [formControlName]="'nickname'" />
+                <input
-                <div class="copy-fields-toggles" matSuffix></div>
+                  matInput
+                  [formControlName]="'nickname'"
+                  (focusout)="__checkNickname($event)"
+                />
+                <mat-error
+                  *ngIf="
+                    signupComposeForm.get('nickname')?.hasError('required')
+                  "
+                >
+                  닉네임은 필수 입력입니다.
+                </mat-error>
+                <mat-error
+                  *ngIf="
+                    signupComposeForm
+                      .get('nickname')
+                      ?.hasError('nicknameDuplicate')
+                  "
+                >
+                  닉네임이 중복됩니다.
+                </mat-error>
               </mat-form-field>
             </div>
           </div>
@@ -52,58 +95,109 @@
           <div class="flex flex-col w-full">
             <div class="flex items-center w-full mt-6">
               <!-- 비밀번호 -->
-              <mat-form-field class="fuse-mat-no-subscript w-1/2 pr-2">
+              <mat-form-field class="w-1/2 pr-2">
                 <mat-label>비밀번호</mat-label>
                 <input matInput [formControlName]="'password'" />
-                <div class="copy-fields-toggles" matSuffix></div>
+                <mat-error
+                  *ngIf="
+                    signupComposeForm.get('password')?.hasError('required')
+                  "
+                >
+                  비밀번호는 필수 입력입니다.
+                </mat-error>
               </mat-form-field>
 
               <!-- 비밀번호 확인 -->
-              <mat-form-field class="fuse-mat-no-subscript w-1/2 pl-2">
+              <mat-form-field class="w-1/2 pl-2">
                 <mat-label>비밀번호 확인</mat-label>
                 <input matInput [formControlName]="'passwordConfirm'" />
+                <mat-error
+                  *ngIf="
+                    signupComposeForm
+                      .get('passwordConfirm')
+                      ?.hasError('required')
+                  "
+                >
+                  비밀번호 확인은 필수 입력입니다.
+                </mat-error>
               </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="fuse-mat-no-subscript w-1/2 pr-2">
+              <mat-form-field class="w-1/2 pr-2">
                 <mat-label>출금비밀번호</mat-label>
                 <input matInput [formControlName]="'exchangePassword'" />
-                <div class="copy-fields-toggles" matSuffix></div>
+                <mat-error
+                  *ngIf="
+                    signupComposeForm
+                      .get('exchangePassword')
+                      ?.hasError('required')
+                  "
+                >
+                  출금 비밀번호는 필수 입력입니다.
+                </mat-error>
               </mat-form-field>
 
               <!-- 전화번호 -->
-              <mat-form-field class="fuse-mat-no-subscript w-1/2 pl-2">
+              <mat-form-field class="w-1/2 pl-2">
                 <mat-label>전화번호</mat-label>
                 <input matInput [formControlName]="'mobilePhoneNumber'" />
+                <mat-error
+                  *ngIf="
+                    signupComposeForm
+                      .get('mobilePhoneNumber')
+                      ?.hasError('required')
+                  "
+                >
+                  전화번호는 필수 입력입니다.
+                </mat-error>
               </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="fuse-mat-no-subscript w-1/2 pr-2">
+              <mat-form-field class="w-1/2 pr-2">
                 <mat-label>은행명</mat-label>
                 <input matInput [formControlName]="'bankName'" />
-                <div class="copy-fields-toggles" matSuffix></div>
+                <mat-error
+                  *ngIf="
+                    signupComposeForm.get('bankName')?.hasError('required')
+                  "
+                >
+                  은행명은 필수 입력입니다.
+                </mat-error>
               </mat-form-field>
 
               <!-- 계좌번호 -->
-              <mat-form-field class="fuse-mat-no-subscript w-1/2 pl-2">
+              <mat-form-field class="w-1/2 pl-2">
                 <mat-label>계좌번호</mat-label>
                 <input matInput [formControlName]="'accountNumber'" />
+                <mat-error
+                  *ngIf="
+                    signupComposeForm.get('accountNumber')?.hasError('required')
+                  "
+                >
+                  계좌번호는 필수 입력입니다.
+                </mat-error>
               </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="fuse-mat-no-subscript w-1/2 pr-2">
+              <mat-form-field class="w-1/2 pr-2">
                 <mat-label>예금주</mat-label>
                 <input matInput [formControlName]="'accountHolder'" />
-                <div class="copy-fields-toggles" matSuffix></div>
+                <mat-error
+                  *ngIf="
+                    signupComposeForm.get('accountHolder')?.hasError('required')
+                  "
+                >
+                  예금주는 필수 입력입니다.
+                </mat-error>
               </mat-form-field>
             </div>
           </div>

src/app/modules/user/main/compose/sign-up-compose.component.ts

@@ -1,6 +1,8 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { MatDialogRef } from '@angular/material/dialog';
+import { IdentityService } from 'app/modules/polyglot/identity/services/identity.service';
+import { MemberService } from 'app/modules/polyglot/member/services/member.service';
 
 @Component({
   selector: 'sign-up-compose',
@@ -8,7 +10,7 @@ import { MatDialogRef } from '@angular/material/dialog';
   encapsulation: ViewEncapsulation.None,
 })
 export class SignUpComposeComponent implements OnInit {
-  composeForm!: FormGroup;
+  signupComposeForm!: FormGroup;
   copyFields: { cc: boolean; bcc: boolean } = {
     cc: false,
     bcc: false,
@@ -26,8 +28,14 @@ export class SignUpComposeComponent implements OnInit {
    */
   constructor(
     public matDialogRef: MatDialogRef<SignUpComposeComponent>,
-    private _formBuilder: FormBuilder
+    private _formBuilder: FormBuilder,
-  ) {}
+    private _identityService: IdentityService,
+    private _memberService: MemberService
+  ) {
+    this._identityService
+      .checkUsernameForDuplication('administrator')
+      .then((v) => console.log('result: ', v));
+  }
 
   // -----------------------------------------------------------------------------------------------------
   // @ Lifecycle hooks
@@ -38,11 +46,17 @@ export class SignUpComposeComponent implements OnInit {
    */
   ngOnInit(): void {
     // Create the form
-    this.composeForm = this._formBuilder.group({
+    this.signupComposeForm = this._formBuilder.group({
-      signInId: ['', [Validators.required, Validators.email]],
+      referalCode: ['', [Validators.required]],
-      password: ['', [Validators.email]],
+      username: ['', [Validators.required]],
-      passwordConfirm: ['', [Validators.email]],
       nickname: ['', Validators.required],
+      password: ['', [Validators.required]],
+      passwordConfirm: ['', [Validators.required]],
+      exchangePassword: ['', [Validators.required]],
+      mobilePhoneNumber: ['', [Validators.required]],
+      bankName: ['', [Validators.required]],
+      accountNumber: ['', [Validators.required]],
+      accountHolder: ['', [Validators.required]],
     });
   }
 
@@ -90,4 +104,34 @@ export class SignUpComposeComponent implements OnInit {
    * Send the message
    */
   send(): void {}
+
+  __checkUsernameDuplicate(event: FocusEvent): void {
+    const username = this.signupComposeForm.get('username')?.value;
+    // console.log(event, '::', username);
+    this._identityService
+      .checkUsernameForDuplication(username)
+      .then((isUse: boolean) => {
+        if (!!isUse) {
+          this.signupComposeForm
+            .get('username')
+            ?.setErrors({ usernameDuplicate: true });
+        }
+        // this._changeDetectorRef.markForCheck();
+      });
+  }
+
+  __checkNickname(event: FocusEvent): void {
+    const nickname = this.signupComposeForm.get('nickname')?.value;
+
+    this._identityService
+      .checkNicknameForDuplication(nickname)
+      .then((isUse: boolean) => {
+        if (!!isUse) {
+          this.signupComposeForm
+            .get('nickname')
+            ?.setErrors({ nicknameDuplicate: true });
+        }
+        // this._changeDetectorRef.markForCheck();
+      });
+  }
 }