[FE] 행사 생성 시 관리자 이름 유효성 검사가 올바르게 수행되지 않는 버그와 그 외

[pakxe]

issue

• close [FE] 행사 생성 시 관리자 이름에 숫자 또는 공백을 입력하면 다음 버튼이 활성화되는 버그 #859

구현 목적

1. 관리자 이름 유효성을 검증하는 유틸 함수인 validateMemberName이 이름에 맞는 일을 하고있지 않습니다. 현재 하고 있는 일은 setNickname을 수행할 수 있는지 여부를 반환하고 있습니다. setNickname은 할 수 있더라도 그게 valid한 값이 아닐 수 있습니다.
2. ‘aa’에서 ‘aa2’처럼 숫자를 입력하면 이름은 4자까지 입력 가능하다는 에러메세지가 뜨고있습니다. '숫자를 입력할 수 없다'라는 에러메세지가 떠야합니다.
3. 공백을(‘ ‘) 입력하면 name.length !== 0이 아니기 때문에 true가 되어 다음 단계로 넘어갈 수 있습니다. 올바른 이름이 아니므로 넘어가면 안됩니다.

구현 사항

1. 관리자 이름 유효성을 검증하는 유틸 함수인 validateMemberName이 이름에 맞는 일을 하고있지 않습니다. ⋯

이 pr본문에서 validateMemberName은 기니까 검증 함수로 줄여서 지칭하겠습니다!

이름의 유효 갈이는 0자 초과 4자 이하여야 합니다. 따라서 검증 함수에서 4까지 slice하고 0이상임을 확인하도록 했습니다.

const slicedName = name.trim().slice(0, RULE.maxMemberNameLength);

  const validateLength = () => {
    return slicedName.length > 0;
  };

그냥 validateLength에 넣으면 되지 왜 slice를 하는 건지 의문이 들 텐데요.
validateLength에서 && 로 함께 최대 길이를 검증할 경우 초과 입력의 경우 isValid가 false가 되기 때문입니다. 하지만 input안에 이름은 4자까지만 입력되기 때문에 초과 입력이 발생해도 이전 4자까지의 입력이 유효하다면 isValid는 true여야합니다. 즉, 초과 입력 발생 시 평가 대상은 4자 까지의 이름입니다. 그래서 isValid의 계산식에 포함되어있는 validateLength에서 최대 길이 조건을 빼고 대신 slicedName에 포함시켜 유효성 검사를 slicedName로 수행하도록 했습니다.

이제 초과 입력이 발생해도 4자까지의 이름이 유효하다면 isValid=true로 평가됩니다. 하지만 에러 메세지는 떠야 사용자가 왜 4자 초과로 입력되지 않는건지 이해할 수 있습니다. 따라서 에러 메세지의 경우 입력을 시도하고 있는 값인 target.value(검증 함수에서 name 변수)를 사용해 계산합니다.

const getErrorMessage = () => {
    if (!validateOnlyString()) return ERROR_MESSAGE.memberNameFormat;
    
    //    ⬇️ 여기
    if (name.length > RULE.maxMemberNameLength) return ERROR_MESSAGE.memberNameLength; 
    return null;
  };

이렇게 유효한 이름인지 여부인 isValid를 올바르게 계산할 수 있도록 고쳤습니다.

그리고 slicedName을 setNickname에 사용할 수 있도록 return했습니다. 4자 까지만 보기 때문에 초과입력이 들어와도 isValid는 유지됩니다. 이때 4자만큼만 input에 들어갈 수 있도록 하려면 검증 함수가 아닌 setNickname을 수행하는 곳에서 slice해도 되지만, slice는 유효성 책임이 큰 것 같아 검증 함수에서 유효하게 잘라 반환해 그 값을 set하도록 했어요.

2. ‘aa’에서 ‘aa2’처럼 숫자를 입력하면 이름은 4자까지 입력 가능하다는 에러메세지가 뜨고있습니다. ⋯

오류 메세지가 null이거나 이름 길이 이렇게 2개로만 변화되고 있기 때문에 틀린 조건에 따라 다른 에러 메세지를 띄워주도록 했습니다.

const getErrorMessage = () => {
    if (!validateOnlyString()) return ERROR_MESSAGE.memberNameFormat;
    if (name.length > RULE.maxMemberNameLength) return ERROR_MESSAGE.memberNameLength;
    return null;
  };

3. 공백을(‘ ‘) 입력하면 name.length !== 0이 아니기 때문에 true가 되어 다음 단계로 넘어갈 수 있습니다. ⋯

1번의 수정 결과로 isValid로 올바른 이름인지 여부를 판별할 수 있게 되었습니다.

그래서 이름이 수정될 때(setNickname 호출) setCanSubmit을 함께 수정하도록 했습니다.
이때 setCanSubmit에 넘겨주는 값은 isValid로 주었는데요.
이름이 수정되어도 빈 값('')으로 수정되는 경우는 canSubmit이 false여야 합니다. 그래서 수정될 때 isValid값에 따라 cnaSubmit이 변하도록 했습니다.

결과

왼쪽에 로그찍히는게 현재 키보드 입력 값입니다. event.target.value의 예상 값을 저 로그로 추측하면 됩니다. 로그가 key up, down으로 2개 세트로 뜨기 때문에 1개로 해석해주시면 됩니다~!

▼ 전 ('aa1'를 입력할 경우 길이 오류가 뜬다. + spacebar와 숫자 입력 시 다음 넘어가기 가능)

Screen.Recording.2024-12-18.at.1.02.24.AM.mov

▼ 후 ('aa2'를 입력할 경우 숫자 입력할 수 없다고 한다. + spacebar와 숫자 입력 시 다음 넘어가기 불가능)

Screen.Recording.2024-12-18.at.1.03.04.AM.mov

논의 사항

빠뜨린 논리가 있을까요?

기타

아마 이전 검증 함수를 사용하고 있는 곳은 비슷한 오류가 나고 있을 것으로 예상됩니다.

[github-actions]

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-mkhqakpcyz.chromatic.com/

[soi-ha]

이런 버그가 존재하는 줄 전혀 몰랐네요!🫣
빠르게 반영해줘서 고마워요 웨디!

[soi-ha]

웨디가 반영해준 pr덕분에 예전에 남겨뒀던 pr이 하나 떠올랐는데요!

백엔드 측에서는 멤버 이름 글자수 제한이 4자에서 8자로 변경된 것으로 알고 있어요! 혹시 maxMemberNameLength 상수 값을 8로 변경하는 것도 이번 이슈에서 같이 반영해주실 수 있을까요~?

[pakxe]

오 반영하겠씁니다. 인지하지 못했었는데 고마워요

[soi-ha]

name.length === 0을 검증하는 부분에서
trim을 사용해서 길이가 0인지 확인하는 건 어떨까요?? 입력값이 ' '(공백 2개)이라면 현재 코드에서는 0이 맞기 때문에 조건문에 통과될 것 같아서요!

물론 validate 함수에서 검증을 진행해서 위와 같은 값이 들어와도 괜찮을 것 같긴 한데용..
흠.. 두번 제약을 거는게 좋을지?는 좀 고민이네요🤔

[jinhokim98]

웨디 덕분에 사용자들이 더 헷갈리지 않게 사용할 것 같아요! 이런 세심한 점까지 신경 써서 예외 처리를 해주는 점이 웨디의 큰 장점인 것 같아요! 고생했습니다~

[jinhokim98]

사람들이 동명이인을 입력할 경우 어떻게 처리하는 지 궁금해요.. 이를 알 수 있는 방법이 있다면 좋을텐데..
동명이인일 때 숫자를 활용할지 아니면 영어나 다른 한글로 처리할 지 궁금해요.. 이에 따라 정책을 정하면 좋을 것 같아서요

[jinhokim98]

저도 이 부분 아예 인지하지 못 했어요.. 역시 에러 처리에 꼼꼼한 웨디