diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index d03e6bd..8c71131 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -21,6 +21,8 @@ import { environment } from 'environments/environment';
 
 import { BankModule } from 'app/modules/polyglot/bank/bank.module';
 import { IdentityModule } from 'app/modules/polyglot/identity/identity.module';
+import { MemberModule } from 'app/modules/polyglot/member/member.module';
+import { MemberReferrerModule } from 'app/modules/polyglot/member_referrer/member_referrer.module';
 
 import { ApiModule } from 'app/modules/polyglot/api/api.module';
 
@@ -53,8 +55,10 @@ const routerConfig: ExtraOptions = {
     NatsModule.forRoot(environment.nats),
     WebStorageModule.forRoot({}),
 
+    MemberModule.forRoot(),
     BankModule.forRoot(),
     IdentityModule.forRoot(),
+    MemberReferrerModule.forRoot(),
 
     ApiModule.forRoot(),
   ],
diff --git a/src/app/modules/polyglot/member/member.module.ts b/src/app/modules/polyglot/member/member.module.ts
new file mode 100644
index 0000000..9409680
--- /dev/null
+++ b/src/app/modules/polyglot/member/member.module.ts
@@ -0,0 +1,16 @@
+import { ModuleWithProviders, NgModule } from '@angular/core';
+
+import { SERVICES } from './services';
+
+@NgModule({})
+export class MemberRootModule {}
+
+@NgModule({})
+export class MemberModule {
+  public static forRoot(): ModuleWithProviders<MemberRootModule> {
+    return {
+      ngModule: MemberRootModule,
+      providers: [...SERVICES],
+    };
+  }
+}
diff --git a/src/app/modules/polyglot/member/services/index.ts b/src/app/modules/polyglot/member/services/index.ts
new file mode 100644
index 0000000..b2b6f9a
--- /dev/null
+++ b/src/app/modules/polyglot/member/services/index.ts
@@ -0,0 +1,5 @@
+import { Type } from '@angular/core';
+
+import { MemberService } from './member.service';
+
+export const SERVICES: Type<any>[] = [MemberService];
diff --git a/src/app/modules/polyglot/member/services/member.service.ts b/src/app/modules/polyglot/member/services/member.service.ts
new file mode 100644
index 0000000..307cf46
--- /dev/null
+++ b/src/app/modules/polyglot/member/services/member.service.ts
@@ -0,0 +1,183 @@
+import { Injectable } from '@angular/core';
+import { NatsService } from 'app/core/nats/services/nats.service';
+import * as nats from 'nats.ws';
+
+import { Error } from 'app/modules/proto/protobuf/rpc_pb';
+
+import {
+  ListMembersRequest,
+  ListMembersResponse,
+  GetMemberByUsernameRequest,
+  GetMemberByUsernameResponse,
+  GetMemberRequest,
+  GetMemberResponse,
+  UpdateMemberRequest,
+  UpdateMemberResponse,
+  CreateMemberResponse,
+  CreateMemberRequest,
+} from 'app/modules/proto/c2se/member_pb';
+import {
+  SUBJECT_LIST_MEMBERS,
+  SUBJECT_GET_MEMBER,
+  SUBJECT_GET_MEMBER_BY_USERNAME,
+  SUBJECT_UPDATE_MEMBER,
+  SUBJECT_CREATE_MEMBER,
+} from 'app/modules/proto/c2se/backend/member_pb';
+import { Pagination } from 'app/modules/proto/protobuf/pagination_pb';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class MemberService {
+  /**
+   * Constructor
+   */
+  constructor(private __natsService: NatsService) {}
+
+  // -----------------------------------------------------------------------------------------------------
+  // @ Accessors
+  // -----------------------------------------------------------------------------------------------------
+
+  // -----------------------------------------------------------------------------------------------------
+  // @ Public methods
+  // -----------------------------------------------------------------------------------------------------
+
+  listMembers(req?: ListMembersRequest): Promise<ListMembersResponse.Result> {
+    return new Promise<ListMembersResponse.Result>((resolve, reject) => {
+      if (!req) {
+        req = new ListMembersRequest();
+      }
+
+      if (!req.hasPagination()) {
+        let paging = new Pagination();
+        paging.setPageSize(10);
+        paging.setPage(0);
+
+        req.setPagination(paging);
+      }
+
+      this.__natsService
+        .request<ListMembersResponse.Result>(
+          SUBJECT_LIST_MEMBERS,
+          req.serializeBinary(),
+          ListMembersResponse.deserializeBinary
+        )
+        .then((result) => {
+          console.log('success', result, result.getMembersList());
+          resolve(result);
+        })
+        .catch((e: Error) => {
+          console.log('failed', e);
+          reject(e);
+        });
+    });
+  }
+
+  getMember(id: string): Promise<GetMemberResponse.Result> {
+    return new Promise<GetMemberResponse.Result>((resolve, reject) => {
+      let req = new GetMemberRequest();
+      req.setId(id);
+
+      this.__natsService
+        .request<GetMemberResponse.Result>(
+          SUBJECT_GET_MEMBER,
+          req.serializeBinary(),
+          GetMemberResponse.deserializeBinary
+        )
+        .then((result) => {
+          console.log('success', result, result.getMember());
+          resolve(result);
+        })
+        .catch((e: Error) => {
+          console.log('failed', e);
+          reject(e);
+        });
+    });
+  }
+
+  getMemberByUsername(): Promise<GetMemberByUsernameResponse.Result> {
+    return new Promise<GetMemberByUsernameResponse.Result>(
+      (resolve, reject) => {
+        let req = new GetMemberByUsernameRequest();
+
+        this.__natsService
+          .request<GetMemberByUsernameResponse.Result>(
+            SUBJECT_GET_MEMBER_BY_USERNAME,
+            req.serializeBinary(),
+            GetMemberByUsernameResponse.deserializeBinary
+          )
+          .then((result) => {
+            resolve(result);
+          })
+          .catch((e: Error) => {
+            console.log('failed', e);
+            reject(e);
+          });
+      }
+    );
+  }
+
+  updateMember(
+    id: string,
+    siteId: string,
+    memberLevelId: string,
+    password: string,
+    mobilePhoneNumber: string
+  ): Promise<UpdateMemberResponse.Result> {
+    return new Promise<UpdateMemberResponse.Result>((resolve, reject) => {
+      let req = new UpdateMemberRequest();
+      req.setId(id);
+
+      if (!!siteId) {
+        req.setSiteId(siteId);
+      }
+      if (!!memberLevelId) {
+        req.setMemberLevelId(memberLevelId);
+      }
+      if (!!password) {
+        req.setPassword(password);
+      }
+      if (!!mobilePhoneNumber) {
+        req.setMobilePhoneNumber(mobilePhoneNumber);
+      }
+
+      this.__natsService
+        .request<UpdateMemberResponse.Result>(
+          SUBJECT_UPDATE_MEMBER,
+          req.serializeBinary(),
+          UpdateMemberResponse.deserializeBinary
+        )
+        .then((result) => {
+          console.log('updateMember Result: ', result);
+          resolve(result);
+        })
+        .catch((e: Error) => {
+          console.log('failed', e);
+          reject(e);
+        });
+    });
+  }
+
+  // siteId: 8429a7ab-b9de-400b-a209-28ff46e22bec
+  // classId: 4b014ef5-3bab-4413-aaf9-b0040a70ec77
+  // levelId: c56231ac-2120-4a81-a30a-5d41fafb6c57
+
+  createMember(req: CreateMemberRequest): Promise<CreateMemberResponse.Result> {
+    return new Promise<CreateMemberResponse.Result>((resolve, reject) => {
+      this.__natsService
+        .request<CreateMemberResponse.Result>(
+          SUBJECT_CREATE_MEMBER,
+          req.serializeBinary(),
+          CreateMemberResponse.deserializeBinary
+        )
+        .then((result) => {
+          console.log('createMember Result: ', result);
+          resolve(result);
+        })
+        .catch((e: Error) => {
+          console.log('failed', e);
+          reject(e);
+        });
+    });
+  }
+}
diff --git a/src/app/modules/polyglot/member_referrer/member_referrer.module.ts b/src/app/modules/polyglot/member_referrer/member_referrer.module.ts
new file mode 100644
index 0000000..63da405
--- /dev/null
+++ b/src/app/modules/polyglot/member_referrer/member_referrer.module.ts
@@ -0,0 +1,16 @@
+import { ModuleWithProviders, NgModule } from '@angular/core';
+
+import { SERVICES } from './services';
+
+@NgModule({})
+export class MemberReferrerRootModule {}
+
+@NgModule({})
+export class MemberReferrerModule {
+  public static forRoot(): ModuleWithProviders<MemberReferrerRootModule> {
+    return {
+      ngModule: MemberReferrerRootModule,
+      providers: [...SERVICES],
+    };
+  }
+}
diff --git a/src/app/modules/polyglot/member_referrer/services/index.ts b/src/app/modules/polyglot/member_referrer/services/index.ts
new file mode 100644
index 0000000..af8c96b
--- /dev/null
+++ b/src/app/modules/polyglot/member_referrer/services/index.ts
@@ -0,0 +1,5 @@
+import { Type } from '@angular/core';
+
+import { MemberReferrerService } from './member_referrer.service';
+
+export const SERVICES: Type<any>[] = [MemberReferrerService];
diff --git a/src/app/modules/polyglot/member_referrer/services/member_referrer.service.ts b/src/app/modules/polyglot/member_referrer/services/member_referrer.service.ts
new file mode 100644
index 0000000..34bfc4b
--- /dev/null
+++ b/src/app/modules/polyglot/member_referrer/services/member_referrer.service.ts
@@ -0,0 +1,165 @@
+import { Injectable } from '@angular/core';
+import { NatsService } from 'app/core/nats/services/nats.service';
+import * as nats from 'nats.ws';
+
+import { Error } from 'app/modules/proto/protobuf/rpc_pb';
+
+import {
+  ListMemberReferrersRequest,
+  ListMemberReferrersResponse,
+  CreateMemberReferrerRequest,
+  CreateMemberReferrerResponse,
+  UpdateMemberReferrerRequest,
+  UpdateMemberReferrerResponse,
+  DeleteMemberReferrerRequest,
+  DeleteMemberReferrerResponse,
+  GetMemberReferrerResponse,
+  GetMemberReferrerRequest,
+} from 'app/modules/proto/c2se/member_referrer_pb';
+import {
+  SUBJECT_LIST_MEMBER_REFERRERS,
+  SUBJECT_CREATE_MEMBER_REFERRER,
+  SUBJECT_UPDATE_MEMBER_REFERRER,
+  SUBJECT_DELETE_MEMBER_REFERRER,
+  SUBJECT_GET_MEMBER_REFERRER,
+} from 'app/modules/proto/c2se/backend/member_referrer_pb';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class MemberReferrerService {
+  /**
+   * Constructor
+   */
+  constructor(private __natsService: NatsService) {}
+
+  // -----------------------------------------------------------------------------------------------------
+  // @ Accessors
+  // -----------------------------------------------------------------------------------------------------
+
+  // -----------------------------------------------------------------------------------------------------
+  // @ Public methods
+  // -----------------------------------------------------------------------------------------------------
+
+  createMemberReferrer(
+    memberId: string
+  ): Promise<CreateMemberReferrerResponse.Result> {
+    return new Promise<CreateMemberReferrerResponse.Result>(
+      (resolve, reject) => {
+        let req = new CreateMemberReferrerRequest();
+        req.setMemberId(memberId);
+
+        this.__natsService
+          .request<CreateMemberReferrerResponse.Result>(
+            SUBJECT_CREATE_MEMBER_REFERRER,
+            req.serializeBinary(),
+            CreateMemberReferrerResponse.deserializeBinary
+          )
+          .then((result) => {
+            console.log('success', result, result.getMemberReferrer());
+            return resolve(result);
+          })
+          .catch((e: Error) => {
+            console.log('failed', e);
+            return reject(e);
+          });
+      }
+    );
+  }
+
+  listMemberReferrers(): Promise<ListMemberReferrersResponse.Result> {
+    return new Promise<ListMemberReferrersResponse.Result>(
+      (resolve, reject) => {
+        let req = new ListMemberReferrersRequest();
+
+        this.__natsService
+          .request<ListMemberReferrersResponse.Result>(
+            SUBJECT_LIST_MEMBER_REFERRERS,
+            req.serializeBinary(),
+            ListMemberReferrersResponse.deserializeBinary
+          )
+          .then((result) => {
+            console.log('success', result, result.getMemberReferrersList());
+            return resolve(result);
+          })
+          .catch((e: Error) => {
+            console.log('failed', e);
+            reject(e);
+          });
+      }
+    );
+  }
+
+  getMemberReferrer(id: string): Promise<GetMemberReferrerResponse.Result> {
+    return new Promise<GetMemberReferrerResponse.Result>((resolve, reject) => {
+      let req = new GetMemberReferrerRequest();
+
+      req.setId(id);
+
+      this.__natsService
+        .request<GetMemberReferrerResponse.Result>(
+          SUBJECT_GET_MEMBER_REFERRER,
+          req.serializeBinary(),
+          GetMemberReferrerResponse.deserializeBinary
+        )
+        .then((result) => {
+          console.log('success', result, result.getMemberReferrer());
+          return resolve(result);
+        })
+        .catch((e: Error) => {
+          console.log('failed', e);
+          return reject(e);
+        });
+    });
+  }
+
+  updateMemberReferrer(): Promise<UpdateMemberReferrerResponse.Result> {
+    return new Promise<UpdateMemberReferrerResponse.Result>(
+      (resolve, reject) => {
+        let req = new UpdateMemberReferrerRequest();
+
+        this.__natsService
+          .request<UpdateMemberReferrerResponse.Result>(
+            SUBJECT_UPDATE_MEMBER_REFERRER,
+            req.serializeBinary(),
+            UpdateMemberReferrerResponse.deserializeBinary
+          )
+          .then((result) => {
+            console.log('success', result, result.getMemberReferrer());
+            return resolve(result);
+          })
+          .catch((e: Error) => {
+            console.log('failed', e);
+            return reject(e);
+          });
+      }
+    );
+  }
+
+  deleteMemberReferrer(
+    id: string
+  ): Promise<DeleteMemberReferrerResponse.Result> {
+    return new Promise<DeleteMemberReferrerResponse.Result>(
+      (resolve, reject) => {
+        let req = new DeleteMemberReferrerRequest();
+
+        req.setId(id);
+
+        this.__natsService
+          .request<DeleteMemberReferrerResponse.Result>(
+            SUBJECT_DELETE_MEMBER_REFERRER,
+            req.serializeBinary(),
+            DeleteMemberReferrerResponse.deserializeBinary
+          )
+          .then((result) => {
+            console.log('success', result);
+            return resolve(result);
+          })
+          .catch((e: Error) => {
+            console.log('failed', e);
+            return reject(e);
+          });
+      }
+    );
+  }
+}
diff --git a/src/app/modules/user/main/compose/sign-up-compose.component.html b/src/app/modules/user/main/compose/sign-up-compose.component.html
index 5e0ec6d..a4f5f0f 100644
--- a/src/app/modules/user/main/compose/sign-up-compose.component.html
+++ b/src/app/modules/user/main/compose/sign-up-compose.component.html
@@ -12,6 +12,17 @@
     </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">
@@ -24,9 +35,15 @@
 
           <mat-form-field class="w-full mt-6">
             <mat-label>추천인 코드</mat-label>
-            <input matInput [formControlName]="'referalCode'" />
+            <input
+              matInput
+              [formControlName]="'referalCode'"
+              (focusout)="__checkReferrerCode($event)"
+            />
             <mat-error
-              *ngIf="signupComposeForm.get('referalCode')?.hasError('required')"
+              *ngIf="
+                signupComposeForm?.get('referalCode')?.hasError('required')
+              "
             >
               추천인 코드는 필수 입력입니다.
             </mat-error>
@@ -47,7 +64,7 @@
                 />
                 <mat-error
                   *ngIf="
-                    signupComposeForm.get('username')?.hasError('required')
+                    signupComposeForm?.get('username')?.hasError('required')
                   "
                 >
                   아이디는 필수 입력입니다.
@@ -55,7 +72,7 @@
                 <mat-error
                   *ngIf="
                     signupComposeForm
-                      .get('username')
+                      ?.get('username')
                       ?.hasError('usernameDuplicate')
                   "
                 >
@@ -74,7 +91,7 @@
                 />
                 <mat-error
                   *ngIf="
-                    signupComposeForm.get('nickname')?.hasError('required')
+                    signupComposeForm?.get('nickname')?.hasError('required')
                   "
                 >
                   닉네임은 필수 입력입니다.
@@ -82,7 +99,7 @@
                 <mat-error
                   *ngIf="
                     signupComposeForm
-                      .get('nickname')
+                      ?.get('nickname')
                       ?.hasError('nicknameDuplicate')
                   "
                 >
@@ -100,7 +117,7 @@
                 <input matInput [formControlName]="'password'" />
                 <mat-error
                   *ngIf="
-                    signupComposeForm.get('password')?.hasError('required')
+                    signupComposeForm?.get('password')?.hasError('required')
                   "
                 >
                   비밀번호는 필수 입력입니다.
@@ -114,12 +131,21 @@
                 <mat-error
                   *ngIf="
                     signupComposeForm
-                      .get('passwordConfirm')
+                      ?.get('passwordConfirm')
                       ?.hasError('required')
                   "
                 >
                   비밀번호 확인은 필수 입력입니다.
                 </mat-error>
+                <mat-error
+                  *ngIf="
+                    signupComposeForm
+                      ?.get('passwordConfirm')
+                      ?.hasError('passwordNotMatch')
+                  "
+                >
+                  비밀번호가 동일하지 않습니다.
+                </mat-error>
               </mat-form-field>
             </div>
           </div>
@@ -132,7 +158,7 @@
                 <mat-error
                   *ngIf="
                     signupComposeForm
-                      .get('exchangePassword')
+                      ?.get('exchangePassword')
                       ?.hasError('required')
                   "
                 >
@@ -147,7 +173,7 @@
                 <mat-error
                   *ngIf="
                     signupComposeForm
-                      .get('mobilePhoneNumber')
+                      ?.get('mobilePhoneNumber')
                       ?.hasError('required')
                   "
                 >
@@ -161,11 +187,17 @@
               <!-- 은행명 -->
               <mat-form-field class="w-1/2 pr-2">
                 <mat-label>은행명</mat-label>
-                <input matInput [formControlName]="'bankName'" />
+                <mat-select
+                  [formControlName]="'bankId'"
+                  placeholder="은행 선택"
+                >
+                  <mat-option *ngFor="let bank of banks" [value]="bank.getId()">
+                    {{ bank.getName() }}
+                  </mat-option>
+                  <!-- <mat-option [value]="'0'"> 국민은행 </mat-option> -->
+                </mat-select>
                 <mat-error
-                  *ngIf="
-                    signupComposeForm.get('bankName')?.hasError('required')
-                  "
+                  *ngIf="signupComposeForm?.get('bankId')?.hasError('required')"
                 >
                   은행명은 필수 입력입니다.
                 </mat-error>
@@ -177,7 +209,9 @@
                 <input matInput [formControlName]="'accountNumber'" />
                 <mat-error
                   *ngIf="
-                    signupComposeForm.get('accountNumber')?.hasError('required')
+                    signupComposeForm
+                      ?.get('accountNumber')
+                      ?.hasError('required')
                   "
                 >
                   계좌번호는 필수 입력입니다.
@@ -193,7 +227,9 @@
                 <input matInput [formControlName]="'accountHolder'" />
                 <mat-error
                   *ngIf="
-                    signupComposeForm.get('accountHolder')?.hasError('required')
+                    signupComposeForm
+                      ?.get('accountHolder')
+                      ?.hasError('required')
                   "
                 >
                   예금주는 필수 입력입니다.
@@ -222,6 +258,7 @@
                 mat-flat-button
                 [color]="'primary'"
                 (click)="send()"
+                [disabled]="isSendDisable"
               >
                 회원가입
               </button>
diff --git a/src/app/modules/user/main/compose/sign-up-compose.component.ts b/src/app/modules/user/main/compose/sign-up-compose.component.ts
index 135f78b..e5c26bc 100644
--- a/src/app/modules/user/main/compose/sign-up-compose.component.ts
+++ b/src/app/modules/user/main/compose/sign-up-compose.component.ts
@@ -1,39 +1,54 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+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,
+} from 'app/modules/proto/c2se/member_pb';
+import { Bank } from 'app/modules/proto/models/bank_pb';
 
 @Component({
   selector: 'sign-up-compose',
   templateUrl: './sign-up-compose.component.html',
   encapsulation: ViewEncapsulation.None,
+  animations: fuseAnimations,
 })
 export class SignUpComposeComponent implements OnInit {
   signupComposeForm!: FormGroup;
-  copyFields: { cc: boolean; bcc: boolean } = {
-    cc: false,
-    bcc: false,
-  };
-  quillModules: any = {
-    toolbar: [
-      ['bold', 'italic', 'underline'],
-      [{ align: [] }, { list: 'ordered' }, { list: 'bullet' }],
-      ['clean'],
-    ],
+
+  isSendDisable = false;
+  banks!: Bank[];
+
+  alert: { type: FuseAlertType; message: string } = {
+    type: 'success',
+    message: '등록이 성공하였습니다.',
   };
 
+  showAlert: boolean = false;
+
   /**
    * Constructor
    */
   constructor(
     public matDialogRef: MatDialogRef<SignUpComposeComponent>,
     private _formBuilder: FormBuilder,
-    private _identityService: IdentityService
-  ) {
-    this._identityService
-      .checkUsernameForDuplication('administrator')
-      .then((v) => console.log('result: ', v));
-  }
+    private _identityService: IdentityService,
+    private _memberService: MemberService,
+    private _memberReferrerService: MemberReferrerService,
+    private _bankService: BankService
+  ) {}
 
   // -----------------------------------------------------------------------------------------------------
   // @ Lifecycle hooks
@@ -43,17 +58,27 @@ export class SignUpComposeComponent implements OnInit {
    * On init
    */
   ngOnInit(): void {
+    this._bankService
+      .listBanks()
+      .then((result) => {
+        this.banks = result.getBanksList();
+      })
+      .catch((reson) => console.log(reson));
+
     // Create the form
     this.signupComposeForm = this._formBuilder.group({
-      referalCode: ['', [Validators.required]],
+      referalCode: ['maejang0lvl1', [Validators.required]],
       username: ['', [Validators.required]],
       nickname: ['', Validators.required],
-      password: ['', [Validators.required]],
-      passwordConfirm: ['', [Validators.required]],
-      exchangePassword: ['', [Validators.required]],
-      mobilePhoneNumber: ['', [Validators.required]],
-      bankName: ['', [Validators.required]],
-      accountNumber: ['', [Validators.required]],
+      password: ['1234', [Validators.required]],
+      passwordConfirm: [
+        '1234',
+        [Validators.required, this.checkSameForPassword()],
+      ],
+      exchangePassword: ['1234', [Validators.required]],
+      mobilePhoneNumber: ['01012345678', [Validators.required]],
+      bankId: ['', [Validators.required]],
+      accountNumber: ['123123123', [Validators.required]],
       accountHolder: ['', [Validators.required]],
     });
   }
@@ -62,21 +87,6 @@ export class SignUpComposeComponent 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
    */
@@ -102,20 +112,72 @@ export class SignUpComposeComponent implements OnInit {
    * Send the message
    */
   send(): void {
-    if (!this.signupComposeForm.valid) {
+    if (!this.signupComposeForm?.valid) {
       return;
     }
+
+    this.isSendDisable = true;
+
+    const {
+      referalCode,
+      username,
+      nickname,
+      password,
+      passwordConfirm,
+      exchangePassword,
+      mobilePhoneNumber,
+      bankId,
+      accountNumber,
+      accountHolder,
+    } = this.signupComposeForm?.value;
+
+    let bank_account = new CreateMemberRequest.BankAccount();
+    bank_account.setBankId(bankId);
+    bank_account.setName(accountHolder);
+    bank_account.setAccountNumber(accountNumber);
+    bank_account.setExchangePassword(exchangePassword);
+
+    const member = new CreateMemberRequest();
+
+    member.setSiteId('d7cbae26-53b6-4cb1-85a4-66b956cbe1d4');
+    member.setUsername(username);
+    member.setPassword(password);
+    member.setMemberClassId('4598f07a-86d1-42a4-b038-25706683a7cd');
+    member.setMemberLevelId('c56231ac-2120-4a81-a30a-5d41fafb6c57');
+    member.setReferrerMemberUsername(referalCode);
+    member.setNickname(nickname);
+    member.setMobilePhoneNumber(mobilePhoneNumber);
+    member.setBankAccount(bank_account);
+
+    this._memberService
+      .createMember(member)
+      .then((res: CreateMemberResponse.Result) => {
+        console.log(res.getMember());
+        this.showAlert = true;
+      })
+      .catch((e) => {
+        this.showAlert = true;
+        this.alert = { type: 'error', message: '등록에 실패하였습니다.' };
+      })
+      .finally(() => setTimeout(() => this.close(), 5000));
+  }
+
+  __checkReferrerCode(event: FocusEvent): void {
+    // const code = this.signupComposeForm.get('referalCode')?.value;
+    // this._memberReferrerService.getMemberReferrer(
+    //   '6df060ad-3b30-4c6c-8e9f-9d3e30974157'
+    // );
   }
 
   __checkUsernameDuplicate(event: FocusEvent): void {
-    const username = this.signupComposeForm.get('username')?.value;
+    const username = this.signupComposeForm?.get('username')?.value;
     // console.log(event, '::', username);
     this._identityService
       .checkUsernameForDuplication(username)
       .then((isUse: boolean) => {
         if (!!isUse) {
           this.signupComposeForm
-            .get('username')
+            ?.get('username')
             ?.setErrors({ usernameDuplicate: true });
         }
         // this._changeDetectorRef.markForCheck();
@@ -123,17 +185,38 @@ export class SignUpComposeComponent implements OnInit {
   }
 
   __checkNickname(event: FocusEvent): void {
-    const nickname = this.signupComposeForm.get('nickname')?.value;
+    const nickname = this.signupComposeForm?.get('nickname')?.value;
 
     this._identityService
       .checkNicknameForDuplication(nickname)
       .then((isUse: boolean) => {
         if (!!isUse) {
           this.signupComposeForm
-            .get('nickname')
+            ?.get('nickname')
             ?.setErrors({ nicknameDuplicate: true });
         }
         // this._changeDetectorRef.markForCheck();
       });
   }
+
+  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.signupComposeForm?.get('password')?.value as string;
+      const passwordConfirm = control.value as string;
+
+      if (password !== passwordConfirm) {
+        return { passwordNotMatch: true };
+      }
+      return null;
+    };
+  }
 }
diff --git a/src/app/modules/user/main/main.module.ts b/src/app/modules/user/main/main.module.ts
index 03855b5..f3690ee 100644
--- a/src/app/modules/user/main/main.module.ts
+++ b/src/app/modules/user/main/main.module.ts
@@ -6,12 +6,15 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatInputModule } from '@angular/material/input';
 import { MatDialogModule } from '@angular/material/dialog';
+import { MatSelectModule } from '@angular/material/select';
 
 import { FuseCardModule } from '@fuse/components/card';
 import { SharedModule } from 'app/shared/shared.module';
 
 import { MainComponent } from 'app/modules/user/main/main.component';
 
+import { FuseAlertModule } from '@fuse/components/alert';
+
 import { COMPOSE } from './compose';
 
 const mainRoutes: Route[] = [
@@ -31,8 +34,11 @@ const mainRoutes: Route[] = [
     MatTabsModule,
     MatInputModule,
     MatDialogModule,
+    MatSelectModule,
     FuseCardModule,
     SharedModule,
+
+    FuseAlertModule,
   ],
 })
 export class MainModule {}