1차 피드백 반영 후 수정 작업 (진행 중 --> 완료)

 

 

 

피드백 1.

설정해놓은 비밀번호 정규식에 충족하지 않으면 에러 메세지가 뜨지 않았다.

 

해결방법

새로운 정규식 표현을 사용했다

기존 : /(?=.\d)(?=.[a-zA-ZS]).{8,}/; ( 8글자 이상 )

수정 : /(?=.*\d)(?=.*[a-zA-ZS]).{1,}/;  (영문자 1글자, 숫자 1글자 이상씩 입력해야함.)

 

---

 

피드백 2.

이메일 및 비밀번호가 틀릴 시에 처음 한 번은 뜨는데 두 번째, 세 번째는 modal창이 뜨지 않았다.

이유는 에러메세지가 바뀜에 따라 modal이 열리도록 구현하고,

signIn 함수에서 에러가 발생했을 때, setErrorMsg를 호출하는 로직이 빠져있었다.

 

 

 

기존 코드 

 useEffect(() => {
    if (errorMsg) {
      const onClickSave = () => {
        modal.close();
      };

      const openModalParams: Parameters<typeof modal.open>[0] = {
        title: '[로그인 오류]',
        message: errorMsg,
        leftButtonLabel: '',
        onClickLeftButton: undefined,
        rightButtonLabel: '확인',
        onClickRightButton: onClickSave
      };
      modal.open(openModalParams);
  
    }
  }, [errorMsg]);

  // 로그인
  const signIn: SubmitHandler<Data> = async (data) => {
    try {
      const userCredential = await signInWithEmailAndPassword(auth, data.email, data.password);
      //console.log('userCredential', userCredential);

      // 로그인 성공 시 role, authCurrentUser의 recoil(전역상태) update
      const user = userList && userList.find((user) => user.uid === authCurrentUser?.uid);
      if (user && auth) {
        setRole(user.role);
      }
 
      // home으로 이동
      navigate('/');
    } catch (error) {
      setErrorMsg(error);
      setValue('email', '');
      setValue('password', '');
    }
  };

 

 

 

수정된 코드

  useEffect(() => {
    if (errorMsg) {
      const onClickSave = () => {
        modal.close();
        setErrorMsg('');  // 모달을 닫을 때, 에러 메시지 상태를 초기화
      };

      const openModalParams: Parameters<typeof modal.open>[0] = {
        title: '[로그인 오류]',
        message: errorMsg,
        leftButtonLabel: '',
        onClickLeftButton: undefined,
        rightButtonLabel: '확인',
        onClickRightButton: onClickSave
      };
      modal.open(openModalParams);
    }
  }, [errorMsg]);

  // 로그인
  const signIn: SubmitHandler<Data> = async (data) => {
    try {
      const userCredential = await signInWithEmailAndPassword(auth, data.email, data.password);

      // 로그인 성공 시 role, authCurrentUser의 recoil(전역상태) update
      const user = userList && userList.find((user) => user.uid === authCurrentUser?.uid);
      if (user && auth) {
        setRole(user.role);
      }

      // home으로 이동
      navigate('/');
    } catch (error) {
      setErrorMsg(error);
      setValue('email', '');
      setValue('password', '');
    }
  };

 

 

해결방법

로그인 도중 에러가 발생하면 setErrorMsg가 호출되어 errorMsg 상태가 변경되고, 이 변경을 감지한 useEffect가 실행되어

모달이 열린다. 그리고 모달이 닫힐 때, 에러 메세지 상태를 초기화해서 다음 에러가 발생이 되어도 모달이 정상적으로

열리게 된다!

 

 

 

---

 

 

그 외의 CSS 피드백

 

1. 커서포인트가 있어서 클릭을 하면 아무 기능이 없다 --> 달력의 커서포인터 제거 

 

2. 프로필 수정버튼이 너무 작다 --> 기존의 톱니모양의 아이콘을 글자가 새겨진 버튼으로 수정

 

3. 오늘 날짜를 표시해주는 날짜의 색이 흰색이라 잘 보이지 않는다 --> 검정색으로 수정

4. 로고색과 게시물 수를 표시해주는 색이 비슷해서 잘 보이지 않는다 --> 색 수정

기존

 

수정