From 6cac14ec8a8d161228536f24fc7e1a1471e7bc26 Mon Sep 17 00:00:00 2001
From: Park Byung Eun <geekdev@naver.com>
Date: Thu, 18 Aug 2022 07:22:47 +0000
Subject: [PATCH] =?UTF-8?q?=ED=9A=8C=EC=9B=90=ED=8F=BC=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../compose/sign-up-compose.component.html    | 164 +++++++++++++-----
 .../main/compose/sign-up-compose.component.ts |   2 +-
 2 files changed, 119 insertions(+), 47 deletions(-)

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 00e066a..0d1beac 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,57 +12,129 @@
     </button>
   </div>
 
-  <!-- Compose form -->
-  <form
-    class="flex flex-col flex-auto p-6 sm:p-8 overflow-y-auto"
-    [formGroup]="composeForm"
-  >
-    <!-- 아이디 -->
-    <mat-form-field>
-      <mat-label>아이디</mat-label>
-      <input matInput [formControlName]="'signInId'" />
-      <div class="copy-fields-toggles" matSuffix></div>
-    </mat-form-field>
+  <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" [formGroup]="composeForm">
+          <!-- 아이디 -->
 
-    <!-- 닉네임 -->
-    <mat-form-field>
-      <mat-label>닉네임</mat-label>
-      <input matInput [formControlName]="'nickname'" />
-    </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>
 
-    <!-- 비밀번호 -->
-    <mat-form-field>
-      <mat-label>비밀번호</mat-label>
-      <input matInput [formControlName]="'password'" />
-    </mat-form-field>
+          <!-- Divider -->
+          <div class="w-full mt-8 mb-7 border-b"></div>
 
-    <!-- 비밀번호 확인 -->
-    <mat-form-field>
-      <mat-label>비밀번호 확인</mat-label>
-      <input matInput [formControlName]="'passwordConfirm'" />
-    </mat-form-field>
+          <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>
 
-    <!-- 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>
+              <!-- Icon color -->
+              <!-- 닉네임 -->
+              <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>
 
-        <!-- Send -->
-        <button
-          class="order-first sm:order-last"
-          mat-flat-button
-          [color]="'primary'"
-          (click)="send()"
-        >
-          회원가입
-        </button>
+          <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]="'password'" />
+                <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]="'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>
-  </form>
+  </div>
 </div>
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 fb43b7f..13dda37 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
@@ -42,7 +42,7 @@ export class SignUpComposeComponent implements OnInit {
       signInId: ['', [Validators.required, Validators.email]],
       password: ['', [Validators.email]],
       passwordConfirm: ['', [Validators.email]],
-      nickname: [''],
+      nickname: ['', Validators.required],
     });
   }