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

fix: 닉네임 관련 유효성 검사 추가

Author: jane1107

src/components/Join/JoinButton.tsx

@@ -15,6 +15,7 @@ interface DialogElement {
 
 const messages = {
   NAME_ISVAILD_ERROR: '이름은 두글자 이상 입력 가능합니다.',
+  NICKNAME_ISVAILD_ERROR: '닉네임은 2 ~ 12자 이상 입력 가능합니다.',
   PHONE_ISVAILD_ERROR: '휴대폰 번호를 정확히 입력해주세요.',
   PWCHECK_ISVAILD_ERROR: '비밀번호 확인을 진행해주세요.',
   EMAIL_PASSWORD_ISVAILD_ERROR: '이메일 또는 비밀번호 형식이 잘못되었습니다.',
@@ -43,6 +44,12 @@ const JoinButton = () => {
       return;
     }
 
+    if (!validator.isValidNickName(nickName)) {
+      setDialogMessage(messages.NICKNAME_ISVAILD_ERROR);
+      dialogRef.current?.openModal();
+      return;
+    }
+
     if (!FormatPhone(phone)) {
       setDialogMessage(messages.PHONE_ISVAILD_ERROR);
       dialogRef.current?.openModal();

src/components/Join/NickNameInput.tsx

@@ -1,8 +1,10 @@
 import InputForm from '../common/InputForm.tsx';
 import { useJoinState } from '../../stores/joinStore.ts';
+import { LooseValidation, ValidateProcessor } from '../../utils/authUtils.ts';
 
 const NickNameInput = () => {
   const { nickName, nickNameHandler } = useJoinState();
+  const validator = new ValidateProcessor(new LooseValidation());
 
   return (
     <InputForm
@@ -15,6 +17,8 @@ const NickNameInput = () => {
       name={'nickName'}
       id={'nickName-input'}
       aria-label={'join-nickName-input'}
+      error={!validator.isValidNickName(nickName)}
+      errorText={'※ 닉네임은 2~12자 이내여야 합니다.'}
     />
   );
 };

src/utils/authUtils.ts

@@ -1,5 +1,6 @@
 export interface ValidationStrategy {
   nameValidate(input: string): boolean;
+  nickNameValidate(input: string): boolean;
   phoneValidate(input: string): boolean;
   emailValidate(input: string): boolean;
   passwordValidate(input: string): boolean;
@@ -10,6 +11,10 @@ export class LooseValidation implements ValidationStrategy {
   nameValidate(name: string): boolean {
     return name.length >= 2;
   }
+  nickNameValidate(nickName: string): boolean {
+    const regex = /^[a-zA-Z0-9\u3131-\uD79D\uAC00-\uD7A3]+$/;
+    return regex.test(nickName) && nickName.length >= 2 && nickName.length <= 12;
+  }
   phoneValidate(phone: string): boolean {
     return phone.length == 11;
   }
@@ -30,6 +35,9 @@ export class StrongValidation implements ValidationStrategy {
   nameValidate(name: string): boolean {
     return name.length >= 2;
   }
+  nickNameValidate(nickName: string): boolean {
+    return nickName.length >= 2 && nickName.length <= 12;
+  }
   phoneValidate(phone: string): boolean {
     return phone.length == 11;
   }
@@ -59,6 +67,10 @@ export class ValidateProcessor {
     return this.#validator.nameValidate(name);
   }
 
+  isValidNickName(nickName: string) {
+    return this.#validator.nickNameValidate(nickName);
+  }
+
   isValidPhone(phone: string) {
     return this.#validator.phoneValidate(phone);
   }