[ Intro ] 로그인 및 회원가입 뷰 만들기

[Happhee]

🔥 Related Issues

• close #81

🎡 작업 내용

• [x] 로그인
• [x] 회원가입 뷰 만들기

✅ PR Point

_app.tsx

👇 router 경로로 헤더 푸터 없애 주기 ✨

{router.pathname === '/write' ? (
          <WriteHeader />
        ) : (
          router.pathname !== '/login' &&
          router.pathname !== '/signup' && <Header />
        )}
        <SessionProvider session={pageProps.session}>
          <Component {...pageProps} />
        </SessionProvider>
        {router.pathname !== '/login' && router.pathname !== '/signup' && (
          <Footer />
        )}

utils/check.ts

👇 닉네임 정규식 검사 함수 만들었습니다 !

export function checkNickname(value: string) {
  const regex = /^[ㄱ-ㅎ|가-힣|a-z|A-Z|0-9|]+$/;
  return regex.test(value);
}

signup.tsx

👇 정규식 검사해서 ref로 만들어놓은 button의 배경색을 제어!

  useEffect(() => {
    signupBtnRef.current &&
      (isNickname && isChecked
        ? (signupBtnRef.current.style.backgroundColor = '#1DB981')
        : (signupBtnRef.current.style.backgroundColor = '#E2E2E2'));
  }, [isNickname, isChecked]);

  const handleNickName = (e: React.ChangeEvent<HTMLInputElement>) => {
    setNickName(e.target.value);
    setIsNickname(checkNickname(e.target.value));
  };
  const handleChecked = () => {
    setIsChecked((prev) => !prev);
  };

😡 Trouble Shooting

자식 선택자가 안먹어요.....왜져ㅠㅠㅠㅠㅠㅠㅠㅠ그래서 다 클래스로 박았는데,,,ㅠ

👀 스크린샷 / GIF / 링크