회원폼 수정

This commit is contained in:
Park Byung Eun 2022-08-18 07:22:47 +00:00
parent be11bf969d
commit 6cac14ec8a
2 changed files with 119 additions and 47 deletions

View File

@ -12,57 +12,129 @@
</button> </button>
</div> </div>
<!-- Compose form --> <div class="flex-auto p-6 sm:p-10">
<form <div class="max-w-3xl">
class="flex flex-col flex-auto p-6 sm:p-8 overflow-y-auto" <div class="flex flex-col p-8 pt-0">
[formGroup]="composeForm" <!-- Compose form -->
> <form class="flex flex-col items-start" [formGroup]="composeForm">
<!-- 아이디 --> <!-- 아이디 -->
<mat-form-field>
<mat-label>아이디</mat-label>
<input matInput [formControlName]="'signInId'" />
<div class="copy-fields-toggles" matSuffix></div>
</mat-form-field>
<!-- 닉네임 --> <mat-form-field
<mat-form-field> class="fuse-mat-no-subscript fuse-mat-textarea w-full mt-6"
<mat-label>닉네임</mat-label> >
<input matInput [formControlName]="'nickname'" /> <mat-label>추천인 코드</mat-label>
</mat-form-field> <input matInput />
<div class="copy-fields-toggles" matSuffix></div>
</mat-form-field>
<!-- 비밀번호 --> <!-- Divider -->
<mat-form-field> <div class="w-full mt-8 mb-7 border-b"></div>
<mat-label>비밀번호</mat-label>
<input matInput [formControlName]="'password'" />
</mat-form-field>
<!-- 비밀번호 확인 --> <div class="flex flex-col w-full">
<mat-form-field> <div class="flex items-center w-full mt-6">
<mat-label>비밀번호 확인</mat-label> <!-- Icon name -->
<input matInput [formControlName]="'passwordConfirm'" /> <mat-form-field class="fuse-mat-no-subscript w-1/2 pr-2">
</mat-form-field> <mat-label>아이디</mat-label>
<input matInput [formControlName]="'signInId'" />
<div class="copy-fields-toggles" matSuffix></div>
</mat-form-field>
<!-- Actions --> <!-- Icon color -->
<div <!-- 닉네임 -->
class="flex flex-col sm:flex-row sm:items-center justify-between mt-4 sm:mt-6" <mat-form-field class="fuse-mat-no-subscript w-1/2 pl-2">
style="align-items: center" <mat-label>닉네임</mat-label>
> <input matInput [formControlName]="'nickname'" />
<div class="flex items-center mt-4 sm:mt-0"> <div class="copy-fields-toggles" matSuffix></div>
<!-- Discard --> </mat-form-field>
<button class="ml-auto sm:ml-0" mat-stroked-button (click)="discard()"> </div>
취소 </div>
</button>
<!-- Send --> <div class="flex flex-col w-full">
<button <div class="flex items-center w-full mt-6">
class="order-first sm:order-last" <!-- 비밀번호 -->
mat-flat-button <mat-form-field class="fuse-mat-no-subscript w-1/2 pr-2">
[color]="'primary'" <mat-label>비밀번호</mat-label>
(click)="send()" <input matInput [formControlName]="'password'" />
> <div class="copy-fields-toggles" matSuffix></div>
회원가입 </mat-form-field>
</button>
<!-- 비밀번호 확인 -->
<mat-form-field class="fuse-mat-no-subscript w-1/2 pl-2">
<mat-label>비밀번호 확인</mat-label>
<input matInput [formControlName]="'passwordConfirm'" />
</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-label>출금비밀번호</mat-label>
<input matInput [formControlName]="'exchangePassword'" />
<div class="copy-fields-toggles" matSuffix></div>
</mat-form-field>
<!-- 전화번호 -->
<mat-form-field class="fuse-mat-no-subscript w-1/2 pl-2">
<mat-label>전화번호</mat-label>
<input matInput [formControlName]="'mobilePhoneNumber'" />
</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-label>은행명</mat-label>
<input matInput [formControlName]="'bankName'" />
<div class="copy-fields-toggles" matSuffix></div>
</mat-form-field>
<!-- 계좌번호 -->
<mat-form-field class="fuse-mat-no-subscript w-1/2 pl-2">
<mat-label>계좌번호</mat-label>
<input matInput [formControlName]="'accountNumber'" />
</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-label>예금주</mat-label>
<input matInput [formControlName]="'accountHolder'" />
<div class="copy-fields-toggles" matSuffix></div>
</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()"
>
회원가입
</button>
</div>
</div>
</form>
</div> </div>
</div> </div>
</form> </div>
</div> </div>

View File

@ -42,7 +42,7 @@ export class SignUpComposeComponent implements OnInit {
signInId: ['', [Validators.required, Validators.email]], signInId: ['', [Validators.required, Validators.email]],
password: ['', [Validators.email]], password: ['', [Validators.email]],
passwordConfirm: ['', [Validators.email]], passwordConfirm: ['', [Validators.email]],
nickname: [''], nickname: ['', Validators.required],
}); });
} }