회원가입 피드백

[DevelopSoo]

Signup.tsx

1. email, password, confirmPassword의 초기값을 빈 문자열로 하면 굳이 undefined라는 타입을 설정할 필요 없을 것 같습니다.
   

   mission/src/pages/SignUp.tsx

   Lines 92 to 96 in a0bcb6c

   	const [inputs, setInputs] = useState<InputsState>({
   	email: undefined,
   	password: undefined,
   	confirmPassword: undefined,
   	});

   
   

   mission/src/pages/SignUp.tsx

   Lines 14 to 18 in a0bcb6c

   	interface InputsState {
   	email: string | undefined;
   	password: string | undefined;
   	confirmPassword: string | undefined;
   	}

2. 불필요한 console.log는 항상 삭제하는 습관을 들입시다.
   

   mission/src/pages/SignUp.tsx

   Line 124 in a0bcb6c

   console.log(users);

[DevelopSoo]

SignIn.tsx

1. 여기도 초기 값을 빈 문자열로 하면 좋겠네요.
   

   mission/src/pages/SignIn.tsx

   Lines 64 to 67 in a0bcb6c

   	const [inputs, setInputs] = useState<LoginUser>({
   	email: undefined,
   	password: undefined,
   	});

   
   

   mission/src/pages/SignIn.tsx

   Lines 8 to 11 in a0bcb6c

   	interface LoginUser {
   	email: string | undefined;
   	password: string | undefined;
   	}

2. if 절을 좀 더 간단하게 만들어봅시다. if 안에 if else가 들어가는 것은 다소 복잡해보이네요.
   

   mission/src/pages/SignIn.tsx

   Lines 103 to 123 in a0bcb6c

   	if (user) {
   	if (user.password === password) {
   	setInputs({
   	email: '',
   	password: '',
   	});
   	setIsLoggedIn(true);
   	localStorage.setItem('currentUser', email ?? '');
   	} else {
   	setErrors({
   	emailError: '',
   	passwordError: '이메일 또는 비밀번호가 일치하지 않습니다.',
   	});
   	}
   	} else {
   	setErrors({
   	emailError: '',
   	passwordError: '존재하지 않는 회원입니다.',
   	});
   	}
   	};

if (!user) {
      setErrors({
        emailError: '',
        passwordError: '존재하지 않는 회원입니다.',
      });
      return;
    }

    if (user.password !== password) {
      setErrors({
        emailError: '',
        passwordError: '이메일 또는 비밀번호가 일치하지 않습니다.',
      });
      return;
    }

    setInputs({
      email: '',
      password: '',
    });
    setIsLoggedIn(true);
    localStorage.setItem('currentUser', email ?? '');
    

3. 로그인 후 바로 로그인 정보가 뜨지 않습니다. 원인이 무엇인지 찾아야할 것 같네요. 제 생각엔 컴포넌트 렌더링이 제대로 동작하지 않는 것 같습니다.
   

   mission/src/components/Header.tsx

   Lines 21 to 26 in a0bcb6c

   	useEffect(() => {
   	const email = localStorage.getItem('currentUser');
   	if (email) {
   	setUserEmail(email);
   	}
   	}, [userEmail]);

4. 로그인을 했는데, 왜 로그인 페이지로 이동하나요?
   

   mission/src/components/Header.tsx

   Lines 32 to 34 in a0bcb6c

   	<LoginLi>
   	<NavLink to='/signin'>{userEmail}</NavLink>
   	</LoginLi>

5. NavLink에 to와 onClick이 함께 있는 것이 다소 어색합니다. 작동은 하는 것 같지만 이런 경우 그냥 useNavigate를 활용하는 것 같아요.
   

   mission/src/components/Header.tsx

   Lines 36 to 38 in a0bcb6c

   	<NavLink to='/signup' onClick={handleLogOut}>
   	로그아웃
   	</NavLink>