bug fix

src/app/modules/beteran/compose/compose/modify-member-compose.component.html

@@ -49,7 +49,25 @@
               </mat-form-field>
               <mat-form-field class="w-1/3 pl-2">
                 <mat-label>현재 비밀번호</mat-label>
-                <input matInput [formControlName]="'currentPassword'" />
+                <input
+                  placeholder="Password"
+                  [type]="hide ? 'password' : 'text'"
+                  matInput
+                  [formControlName]="'currentPassword'"
+                />
+                <mat-icon matSuffix (click)="hide = !hide">{{
+                  hide ? "visibility_off" : "visibility"
+                }}</mat-icon>
+
+                <mat-error
+                  *ngIf="
+                    modifyMemberComposeForm
+                      ?.get('currentPassword')
+                      ?.hasError('required')
+                  "
+                >
+                  현재 사용하고 계시는 패스워드를 입력하세요.
+                </mat-error>
               </mat-form-field>
             </div>
           </div>
@@ -59,7 +77,16 @@
               <!-- 비밀번호 -->
               <mat-form-field class="w-1/2 pr-2">
                 <mat-label>비밀번호</mat-label>
-                <input matInput [formControlName]="'password'" />
+
+                <input
+                  placeholder="Password"
+                  [type]="hide ? 'password' : 'text'"
+                  matInput
+                  [formControlName]="'password'"
+                />
+                <mat-icon matSuffix (click)="hide = !hide">{{
+                  hide ? "visibility_off" : "visibility"
+                }}</mat-icon>
                 <mat-error
                   *ngIf="
                     modifyMemberComposeForm
@@ -69,12 +96,30 @@
                 >
                   비밀번호는 필수 입력입니다.
                 </mat-error>
+                <mat-error
+                  *ngIf="
+                    modifyMemberComposeForm.get('password')?.hasError('pattern')
+                  "
+                >
+                  비밀번호는 영문 대문자,소문자,숫자,특수문자가 포함되어야 하며
+                  8자 이상 20글자 이하로 입력하여야 합니다.
+                </mat-error>
               </mat-form-field>
 
               <!-- 비밀번호 확인 -->
               <mat-form-field class="w-1/2 pl-2">
                 <mat-label>비밀번호 확인</mat-label>
-                <input matInput [formControlName]="'passwordConfirm'" />
+
+                <input
+                  placeholder="Password"
+                  [type]="hide ? 'password' : 'text'"
+                  matInput
+                  [formControlName]="'passwordConfirm'"
+                />
+                <mat-icon matSuffix (click)="hide = !hide">{{
+                  hide ? "visibility_off" : "visibility"
+                }}</mat-icon>
+
                 <mat-error
                   *ngIf="
                     modifyMemberComposeForm

src/app/modules/beteran/compose/compose/modify-member-compose.component.ts

@@ -36,6 +36,7 @@ export class ModifyMemberComposeComponent implements OnInit {
     message: '수정이 성공하였습니다.',
   };
 
+  hide: boolean = true;
   showAlert: boolean = false;
 
   /**
@@ -62,7 +63,13 @@ export class ModifyMemberComposeComponent implements OnInit {
       username: [{ value: '', disabled: true }],
       nickname: [{ value: '', disabled: true }],
       currentPassword: ['1234', [Validators.required]],
-      password: ['1234', [Validators.required]],
+      password: [
+        '1234',
+        [
+          Validators.required,
+          Validators.pattern('^[A-Za-z\\d@$!%*#?&]{8,20}$'),
+        ],
+      ],
       passwordConfirm: [
         '1234',
         [Validators.required, this.checkSameForPassword()],