회원폼 수정

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

@@ -12,36 +12,101 @@
     </button>
   </div>
 
+  <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
+        <form class="flex flex-col items-start" [formGroup]="composeForm">
-    class="flex flex-col flex-auto p-6 sm:p-8 overflow-y-auto"
-    [formGroup]="composeForm"
-  >
           <!-- 아이디 -->
-    <mat-form-field>
+
+          <mat-form-field
+            class="fuse-mat-no-subscript fuse-mat-textarea w-full mt-6"
+          >
+            <mat-label>추천인 코드</mat-label>
+            <input matInput />
+            <div class="copy-fields-toggles" matSuffix></div>
+          </mat-form-field>
+
+          <!-- Divider -->
+          <div class="w-full mt-8 mb-7 border-b"></div>
+
+          <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-label>아이디</mat-label>
                 <input matInput [formControlName]="'signInId'" />
                 <div class="copy-fields-toggles" matSuffix></div>
               </mat-form-field>
 
+              <!-- Icon color -->
               <!-- 닉네임 -->
-    <mat-form-field>
+              <mat-form-field class="fuse-mat-no-subscript w-1/2 pl-2">
                 <mat-label>닉네임</mat-label>
                 <input matInput [formControlName]="'nickname'" />
+                <div class="copy-fields-toggles" matSuffix></div>
               </mat-form-field>
+            </div>
+          </div>
 
+          <div class="flex flex-col w-full">
+            <div class="flex items-center w-full mt-6">
               <!-- 비밀번호 -->
-    <mat-form-field>
+              <mat-form-field class="fuse-mat-no-subscript w-1/2 pr-2">
                 <mat-label>비밀번호</mat-label>
                 <input matInput [formControlName]="'password'" />
+                <div class="copy-fields-toggles" matSuffix></div>
               </mat-form-field>
 
               <!-- 비밀번호 확인 -->
-    <mat-form-field>
+              <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"
@@ -49,7 +114,11 @@
           >
             <div class="flex items-center mt-4 sm:mt-0">
               <!-- Discard -->
-        <button class="ml-auto sm:ml-0" mat-stroked-button (click)="discard()">
+              <button
+                class="ml-auto sm:ml-0"
+                mat-stroked-button
+                (click)="discard()"
+              >
                 취소
               </button>
 
@@ -66,3 +135,6 @@
           </div>
         </form>
       </div>
+    </div>
+  </div>
+</div>

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

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