Merge pull request #120 from imaginer-dev/8-회원가입-폼을-입력하고-유효성-검증을-할-수-있어야-한다

gihwan-dev · web-flow · commit 611906a6a20b · 2024-05-03T00:30:49.000+09:00
8 회원가입 폼을 입력하고 유효성 검증을 할 수 있어야 한다
diff --git a/src/components/Join/EmailInput.tsx b/src/components/Join/EmailInput.tsx
@@ -1,18 +1,24 @@
 import InputForm from '../common/InputForm.tsx';
 import { useJoinState } from '../../stores/joinStore.ts';
+import { LooseValidation, ValidateProcessor } from '../../utils/authUtils.ts';
 
 const EmailInput = () => {
   const { email, emailHandler } = useJoinState();
+  const validator = new ValidateProcessor(new LooseValidation());
 
   return (
     <InputForm
       defaultValue={email}
       title={'이메일'}
-      placeholder={'이메일을 입력하세요'}
-      hint={'Hint Text'}
+      placeholder={'이메일 입력'}
+      hint={''}
       onChange={(e) => emailHandler(e.target.value)}
       type={'email'}
       name={'email'}
+      id={'email-input'}
+      aria-label={'join-email-input'}
+      error={!validator.isValidEmail(email)}
+      errorText={'※ 올바른 이메일을 입력해 주세요.'}
     />
   );
 };
diff --git a/src/components/Join/FormatPhone.tsx b/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;
+}
diff --git a/src/components/Join/JoinButton.tsx b/src/components/Join/JoinButton.tsx
@@ -1,9 +1,10 @@
 import { useJoinState } from '../../stores/joinStore';
 
 const JoinButton = () => {
-  const { name, phone, email, password, pwCheck, useTermsCheck, privacyTermsCheck } = useJoinState();
+  const { nickName, name, phone, email, password, pwCheck, useTermsCheck, privacyTermsCheck } = useJoinState();
 
   const onClick = () => {
+    console.log('nickName: ', nickName);
     console.log('name: ', name);
     console.log('phone: ', phone);
     console.log('email: ', email);
diff --git a/src/components/Join/NameInput.tsx b/src/components/Join/NameInput.tsx
@@ -1,18 +1,24 @@
 import InputForm from '../common/InputForm.tsx';
 import { useJoinState } from '../../stores/joinStore.ts';
+import { LooseValidation, ValidateProcessor } from '../../utils/authUtils.ts';
 
 const NameInput = () => {
   const { name, nameHandler } = useJoinState();
+  const validator = new ValidateProcessor(new LooseValidation());
 
   return (
     <InputForm
       defaultValue={name}
       title={'이름'}
-      placeholder={'이름을 입력하세요'}
-      hint={'Hint Text'}
+      placeholder={'이름(필수)'}
+      hint={''}
       onChange={(e) => nameHandler(e.target.value)}
       type={'name'}
       name={'name'}
+      id={'name-input'}
+      aria-label={'join-name-input'}
+      error={!validator.isValidName(name)}
+      errorText={'※ 이름을 입력해 주세요.'}
     />
   );
 };
diff --git a/src/components/Join/NickNameInput.tsx b/src/components/Join/NickNameInput.tsx
@@ -0,0 +1,22 @@
+import InputForm from '../common/InputForm.tsx';
+import { useJoinState } from '../../stores/joinStore.ts';
+
+const NickNameInput = () => {
+  const { nickName, nickNameHandler } = useJoinState();
+
+  return (
+    <InputForm
+      defaultValue={nickName}
+      title={'닉네임'}
+      placeholder={'닉네임 입력'}
+      hint={''}
+      onChange={(e) => nickNameHandler(e.target.value)}
+      type={'name'}
+      name={'nickName'}
+      id={'nickName-input'}
+      aria-label={'join-nickName-input'}
+    />
+  );
+};
+
+export default NickNameInput;
diff --git a/src/components/Join/PasswordInput.tsx b/src/components/Join/PasswordInput.tsx
@@ -1,18 +1,24 @@
 import InputForm from '../common/InputForm.tsx';
 import { useJoinState } from '../../stores/joinStore.ts';
+import { LooseValidation, ValidateProcessor } from '../../utils/authUtils.ts';
 
 const PasswordInput = () => {
   const { password, passwordHandler } = useJoinState();
+  const validator = new ValidateProcessor(new LooseValidation());
 
   return (
     <InputForm
       defaultValue={password}
       title={'비밀번호'}
-      placeholder={'Password'}
-      hint={'Hint Text'}
+      placeholder={'비밀번호 입력'}
+      hint={''}
       onChange={(e) => passwordHandler(e.target.value)}
       name={'password'}
       type={'password'}
+      id={'password-input'}
+      aria-label={'join-password-input'}
+      error={!validator.isValidPassword(password)}
+      errorText={'※ 비밀번호는 6자리 이상이어야 합니다.'}
     />
   );
 };
diff --git a/src/components/Join/PhoneInput.tsx b/src/components/Join/PhoneInput.tsx
@@ -1,18 +1,26 @@
 import InputForm from '../common/InputForm.tsx';
 import { useJoinState } from '../../stores/joinStore.ts';
+import { FormatPhone } from './FormatPhone.tsx';
+import { LooseValidation, ValidateProcessor } from '../../utils/authUtils.ts';
 
 const PhoneInput = () => {
   const { phone, phoneHandler } = useJoinState();
+  const validator = new ValidateProcessor(new LooseValidation());
+  const formattedPhone = validator.isValidPhone(phone) ? FormatPhone(phone) : phone;
 
   return (
     <InputForm
-      defaultValue={phone}
-      title={'핸드폰 번호'}
-      placeholder={'핸드폰 번호를 입력하세요'}
-      hint={'Hint Text'}
+      title={'휴대폰 번호'}
+      placeholder={"휴대폰 번호 입력 ('-' 제외 11자리 입력)"}
+      hint={''}
       onChange={(e) => phoneHandler(e.target.value)}
       type={'phone'}
       name={'phone'}
+      id={'phone-input'}
+      aria-label={'join-phone-input'}
+      error={!validator.isValidPhone(phone)}
+      value={formattedPhone}
+      errorText={"※ '-' 제외 11자리를 입력해 주세요"}
     />
   );
 };
diff --git a/src/components/Join/PwCheckInput.tsx b/src/components/Join/PwCheckInput.tsx
@@ -1,18 +1,24 @@
 import InputForm from '../common/InputForm.tsx';
 import { useJoinState } from '../../stores/joinStore.ts';
+import { LooseValidation, ValidateProcessor } from '../../utils/authUtils.ts';
 
 const PwCheckInput = () => {
-  const { pwCheck, pwCheckHandler } = useJoinState();
+  const { pwCheck, password, pwCheckHandler } = useJoinState();
+  const validator = new ValidateProcessor(new LooseValidation());
 
   return (
     <InputForm
       defaultValue={pwCheck}
       title={'비밀번호 확인'}
-      placeholder={'Password Check'}
-      hint={'Hint Text'}
+      placeholder={'비밀번호 확인'}
+      hint={''}
       onChange={(e) => pwCheckHandler(e.target.value)}
-      name={'pwCheck'}
       type={'password'}
+      name={'pwCheck'}
+      id={'pwCheck-input'}
+      aria-label={'join-pwCheck-input'}
+      error={!validator.isValidPwCheck(pwCheck, password)}
+      errorText={'※ 비밀번호가 일치하지 않습니다.'}
     />
   );
 };
diff --git a/src/components/Join/TermsCheckInput.tsx b/src/components/Join/TermsCheckInput.tsx
@@ -10,7 +10,13 @@ const TermsCheckInput = () => {
       </div>
       <div className="mt-2 flex items-center justify-between">
         <label htmlFor="termsOne">이용약관 동의 (필수)</label>
-        <input type="radio" className="radio-primary radio" checked={useTermsCheck} onClick={useTermsCheckHandler} />
+        <input
+          type="radio"
+          className="radio-primary radio"
+          checked={useTermsCheck}
+          onClick={useTermsCheckHandler}
+          readOnly
+        />
       </div>
       {!useTermsCheck ? <span className="text-red-500">이용약관에 동의해 주세요.</span> : <span className="h-6"></span>}
       <div className="mt-2 flex items-center justify-between">
@@ -20,6 +26,7 @@ const TermsCheckInput = () => {
           className="radio-primary radio"
           checked={privacyTermsCheck}
           onClick={privacyTermsCheckHandler}
+          readOnly
         />
       </div>
       {!privacyTermsCheck ? (
diff --git a/src/components/Join/index.ts b/src/components/Join/index.ts
@@ -0,0 +1,23 @@
+import EmailInput from './EmailInput.tsx';
+import JoinButton from './JoinButton.tsx';
+import JoinForm from './JoinForm.tsx';
+import JoinFormActions from './JoinFormActions.tsx';
+import NameInput from './NameInput.tsx';
+import NickNameInput from './NickNameInput.tsx';
+import PasswordInput from './PasswordInput.tsx';
+import PhoneInput from './PhoneInput.tsx';
+import PwCheckInput from './PwCheckInput.tsx';
+import TermsCheckInput from './TermsCheckInput.tsx';
+
+export {
+  EmailInput,
+  JoinButton,
+  JoinForm,
+  JoinFormActions,
+  NameInput,
+  NickNameInput,
+  PasswordInput,
+  PhoneInput,
+  PwCheckInput,
+  TermsCheckInput,
+};
diff --git a/src/pages/JoinPage.tsx b/src/pages/JoinPage.tsx
@@ -1,21 +1,25 @@
 import JoinPageLayout from '../layouts/JoinPageLayout.tsx';
 import VerticalLogo from '../components/common/VerticalLogo.tsx';
-import JoinForm from '../components/Join/JoinForm.tsx';
-import NameInput from '../components/Join/NameInput.tsx';
-import PhoneInput from '../components/Join/PhoneInput.tsx';
-import EmailInput from '../components/Join/EmailInput.tsx';
-import PasswordInput from '../components/Join/PasswordInput.tsx';
-import PwCheckInput from '../components/Join/PwCheckInput.tsx';
-import TermsCheckInput from '../components/Join/TermsCheckInput.tsx';
-import JoinFormActions from '../components/Join/JoinFormActions.tsx';
-import JoinButton from '../components/Join/JoinButton.tsx';
+import {
+  JoinForm,
+  NameInput,
+  NickNameInput,
+  PhoneInput,
+  EmailInput,
+  PasswordInput,
+  PwCheckInput,
+  TermsCheckInput,
+  JoinFormActions,
+  JoinButton,
+} from '../components/Join';
 
 const JoinPage = () => {
   return (
     <JoinPageLayout>
       <VerticalLogo />
       <JoinForm>
         <NameInput />
+        <NickNameInput />
         <PhoneInput />
         <EmailInput />
         <PasswordInput />
diff --git a/src/stores/joinStore.ts b/src/stores/joinStore.ts
@@ -2,6 +2,7 @@ import { create } from 'zustand';
 
 interface JoinState {
   name: string;
+  nickName: string;
   phone: string;
   email: string;
   password: string;
@@ -10,6 +11,7 @@ interface JoinState {
   privacyTermsCheck: boolean;
 
   nameHandler: (name: string) => void;
+  nickNameHandler: (name: string) => void;
   phoneHandler: (phone: string) => void;
   emailHandler: (email: string) => void;
   passwordHandler: (password: string) => void;
@@ -20,6 +22,7 @@ interface JoinState {
 
 export const useJoinState = create<JoinState>()((set) => ({
   name: '',
+  nickName: '',
   phone: '',
   email: '',
   password: '',
@@ -28,6 +31,7 @@ export const useJoinState = create<JoinState>()((set) => ({
   privacyTermsCheck: false,
 
   nameHandler: (name: string) => set((state) => ({ ...state, name })),
+  nickNameHandler: (nickName: string) => set((state) => ({ ...state, nickName })),
   phoneHandler: (phone: string) => set((state) => ({ ...state, phone })),
   emailHandler: (email: string) => set((state) => ({ ...state, email })),
   passwordHandler: (password: string) => set((state) => ({ ...state, password })),
diff --git a/src/utils/authUtils.ts b/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);
+  }
 }
