chore: merge

Author: CreatorDodo

src/components/Join/EmailInput.tsx

@@ -1,9 +1,10 @@
 import InputForm from '../common/InputForm.tsx';
 import { useJoinState } from '../../stores/joinStore.ts';
-import { isValidEmail } from '../../utils/authUtils.ts';
+import { LooseValidation, ValidateProcessor } from '../../utils/authUtils.ts';
 
 const EmailInput = () => {
   const { email, emailHandler } = useJoinState();
+  const validator = new ValidateProcessor(new LooseValidation());
 
   return (
     <InputForm
@@ -16,7 +17,7 @@ const EmailInput = () => {
       name={'email'}
       id={'email-input'}
       aria-label={'join-email-input'}
-      error={!isValidEmail(email)}
+      error={!validator.isValidEmail(email)}
       errorText={'※ 올바른 이메일을 입력해 주세요.'}
     />
   );

src/components/Join/FormatPhone.tsx

@@ -0,0 +1,4 @@
+export function FormatPhone(phone: string) {
+  const formatted = phone.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3');
+  return formatted;
+}

src/components/Join/NameInput.tsx

@@ -1,9 +1,10 @@
 import InputForm from '../common/InputForm.tsx';
 import { useJoinState } from '../../stores/joinStore.ts';
-import { isValidName } from '../../utils/authUtils.ts';
+import { LooseValidation, ValidateProcessor } from '../../utils/authUtils.ts';
 
 const NameInput = () => {
   const { name, nameHandler } = useJoinState();
+  const validator = new ValidateProcessor(new LooseValidation());
 
   return (
     <InputForm
@@ -16,7 +17,7 @@ const NameInput = () => {
       name={'name'}
       id={'name-input'}
       aria-label={'join-name-input'}
-      error={!isValidName(name)}
+      error={!validator.isValidName(name)}
       errorText={'※ 이름을 입력해 주세요.'}
     />
   );

src/components/Join/PasswordInput.tsx

@@ -1,9 +1,10 @@
 import InputForm from '../common/InputForm.tsx';
 import { useJoinState } from '../../stores/joinStore.ts';
-import { isValidPassword } from '../../utils/authUtils.ts';
+import { LooseValidation, ValidateProcessor } from '../../utils/authUtils.ts';
 
 const PasswordInput = () => {
   const { password, passwordHandler } = useJoinState();
+  const validator = new ValidateProcessor(new LooseValidation());
 
   return (
     <InputForm
@@ -16,7 +17,7 @@ const PasswordInput = () => {
       type={'password'}
       id={'password-input'}
       aria-label={'join-password-input'}
-      error={!isValidPassword(password)}
+      error={!validator.isValidPassword(password)}
       errorText={'※ 비밀번호는 6자리 이상이어야 합니다.'}
     />
   );

src/components/Join/PhoneInput.tsx

@@ -1,10 +1,12 @@
 import InputForm from '../common/InputForm.tsx';
 import { useJoinState } from '../../stores/joinStore.ts';
-import { isValidPhone, formatPhone } from '../../utils/authUtils.ts';
+import { FormatPhone } from './formatPhone.tsx';
+import { LooseValidation, ValidateProcessor } from '../../utils/authUtils.ts';
 
 const PhoneInput = () => {
   const { phone, phoneHandler } = useJoinState();
-  const formattedPhone = isValidPhone(phone) ? formatPhone(phone) : phone;
+  const validator = new ValidateProcessor(new LooseValidation());
+  const formattedPhone = validator.isValidPhone(phone) ? FormatPhone(phone) : phone;
 
   return (
     <InputForm
@@ -16,7 +18,7 @@ const PhoneInput = () => {
       name={'phone'}
       id={'phone-input'}
       aria-label={'join-phone-input'}
-      error={!isValidPhone(phone)}
+      error={!validator.isValidPhone(phone)}
       value={formattedPhone}
       errorText={"※ '-' 제외 11자리를 입력해 주세요"}
     />

src/components/Join/PwCheckInput.tsx

@@ -1,9 +1,10 @@
 import InputForm from '../common/InputForm.tsx';
 import { useJoinState } from '../../stores/joinStore.ts';
-import { isValidPwCheck } from '../../utils/authUtils.ts';
+import { LooseValidation, ValidateProcessor } from '../../utils/authUtils.ts';
 
 const PwCheckInput = () => {
   const { pwCheck, password, pwCheckHandler } = useJoinState();
+  const validator = new ValidateProcessor(new LooseValidation());
 
   return (
     <InputForm
@@ -16,7 +17,7 @@ const PwCheckInput = () => {
       name={'pwCheck'}
       id={'pwCheck-input'}
       aria-label={'join-pwCheck-input'}
-      error={!isValidPwCheck(pwCheck, password)}
+      error={!validator.isValidPwCheck(pwCheck, password)}
       errorText={'※ 비밀번호가 일치하지 않습니다.'}
     />
   );

src/utils/authUtils.ts

@@ -1,9 +1,23 @@
 export interface ValidationStrategy {
+  nameValidate(input: string): boolean;
+  phoneValidate(input: string): boolean;
   emailValidate(input: string): boolean;
   passwordValidate(input: string): boolean;
+  pwCheckValidate(pwCheck: string, password: string): boolean;
 }
 
 export class LooseValidation implements ValidationStrategy {
+  nameValidate(name: string): boolean {
+    return name.length >= 2;
+  }
+  phoneValidate(phone: string): boolean {
+    return phone.length == 11;
+  }
+
+  pwCheckValidate(pwCheck: string, password: string): boolean {
+    return pwCheck == password;
+  }
+
   emailValidate(email: string): boolean {
     return /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/.test(email);
   }
@@ -13,6 +27,15 @@ export class LooseValidation implements ValidationStrategy {
 }
 
 export class StrongValidation implements ValidationStrategy {
+  nameValidate(name: string): boolean {
+    return name.length >= 2;
+  }
+  phoneValidate(phone: string): boolean {
+    return phone.length == 11;
+  }
+  pwCheckValidate(pwCheck: string, password: string): boolean {
+    return pwCheck == password;
+  }
   emailValidate(password: string): boolean {
     return password.length >= 6;
   }
@@ -32,11 +55,23 @@ export class ValidateProcessor {
     this.#validator = validator;
   }
 
+  isValidName(name: string) {
+    return this.#validator.nameValidate(name);
+  }
+
+  isValidPhone(phone: string) {
+    return this.#validator.phoneValidate(phone);
+  }
+
   isValidEmail(email: string) {
     return this.#validator.emailValidate(email);
   }
 
   isValidPassword(password: string) {
     return this.#validator.passwordValidate(password);
   }
+
+  isValidPwCheck(password: string, pwCheck: string) {
+    return this.#validator.pwCheckValidate(password, pwCheck);
+  }
 }