로그인 페이지 생성하기

경로 생성 및 NavBar 생성

Outlet 중첩 개념을 사용합니다.

위 코드는 App.jsx파일입니다.

components폴더 안에 NavBar.jsx 파일 생성한 후, pages폴더 안에 LoginPage폴더 생성 후, index.jsx파일 생성합니다.

 

로그인 페이지 UI 생성하기

<section className='bg-gray-50 min-h-[90vh] flex items-center justify-center'>
      <div className='bg-gray-100 flex rounded-2xl shadow-lg max-w-3xl p-5 items-center'>
        <div className="md:w-1/2 px-8 md:px-16">
          <h2 className='font-bold text-2xl'>Pokemon</h2>
          <p className='text-xs mt-4 text-[#002D74]'>포켓몬 사이트에 오신걸</p>
          <p className='text-xs mt-4 text-[#002D74]'>환영합니다.</p>
          <p className='text-xs mt-4 text-[#002D74]'>로그인 해주세요</p>
        </div>

        <div className='md:block hidden w-1/2'>
          <img 
            className='rounded-2xl'
            src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/7.png"
            alt="login image" />
        </div>
      </div>
</section>

LoginPage폴더 안에 index.jsx내용입니다.

 

NavBar 컴포넌트 UI 생성하기

  const [show, setShow] = useState(false)

  const listener = () => {
    if(window.scrollY > 50) {
      setShow(true)
    }else {
      setShow(false)
    }
  }

  useEffect(() => {
    window.addEventListener('scroll', listener)

    return () =>{
      window.removeEventListener('scroll', listener)
    }
  })

NavBar.jsx의 state, effect와 함수들입니다.

左) NavWrapper에 props의 show값을 넣어줍니다.

右) NavWrapper의 style에 조건문을 실행합니다.

 

Firebase를 이용해서 로그인하기

import {getAuth, signInWithPopup, GoogleAuthProvider} from 'firebase/auth'
import app from '../firebase'

const NavBar = () => {

  // firebase.js파일에서 getAuth이미 생성함
  const auth = getAuth(app)
  const provider = new GoogleAuthProvider();
  
  const handleAuth = () => {
    signInWithPopup(auth, provider)
      .then(result => {
        console.log(result)
      })
      .catch(error => {
        console.log(error)
      })
  }
  
  return (
  	{pathname === "/login" ? (<Login onClick={handleAuth}>로그인</Login>) : null}
  )
}

const Login = styled.a`
  background-color: rgba(0,0,0,0.6);
  padding: 8px 16px;
  text-transform: uppercase;
  letter-spacing: 1.55px;
  border: 1px solid #f9f9f9;
  border-radius: 4px;
  transition: all 0.2s ease 0s;
  color: white;

  &:hover {
    background-color: #f9f9f9;
    color: #000;
    border-color: transparent;
  }
`

NavBar.jsx의 관련 코드입니다.

 

Firebase를 이용한 로그인 상태 체크(onAuthStateChanged)

onAuthStateChanged를 import합니다.

user 상태 변경을 감지하고 user내용이 없으면, 즉 로그인 안 될 때 login페이지로 이동합니다.

user로그인 되면서 login루트에 있으면 홈으로 이동합니다.

 

로그아웃 기능 구현하기

signOut를 import합니다.

logout를 만듭니다.

로그아웃 UI 대략 틀을 잡고 조건문에 넣어줍니다.

로그아웃의 스타일입니다.

 

데이터 유지하기

localStorage에 userData를 담아서 데이터를 유지합니다.

const NavBar 밖에 initialUserData를 만듭니다.

기존에는 refresh하면 빈배열이지만 이젠 initialUserData를 넣어줍니다.

로그인할 때 userData를 localStorage에 저장해줍니다.