[노철] - 로그인 페이지 구현

[qkdl60]

📌 이슈 번호

close #48

🚀 구현 내용

로그인 페이지 입니다.

로그인한 상태로 로그인 페이지로 접근시 home으로 리다이렉트

📘 참고 사항

환경변수는 컴포넌트 설명서에 올려놓겠습니다

❓ 궁금한 내용

로그인된 상태에서 /login에 접근시 리다이렉트를 시켰는데 너무 반응이 느린것 같습니다. 다른 방법이 있을까요? 그리고
로그인 상태라면 로그인 페이지는 ui도 안 보이도록 하는게 맞을까요?

[suehdn]

고생 많으셨습니다 노철님!! 로그인 구현하시느라 고민 많으셨는데 잘 만들어져서 너무 다행입니다 👍
궁금한 내용에 남겨주신 내용 중 로그인이 되었을 때 login 페이지로 들어오면 UI를 숨기는 게 더 좋은 것 같습니다.
로그인 여부를 로그인 페이지로 가져온 뒤 아래와 같은 방식으로 숨기는 것이 좋을 것 같습니다.

{login && 
   <>
      UI
   <>
}

리다이렉트 속도가 좀 느린게 맞는 것 같네요. 찾아본 결과 dev 모드라 경로가 미리 구축되지 않았기 때문에 훨씬 느리다고 하는 것 같습니다. 그리고 리액트에 비해 느린건 아무래도 리액트는 SPA라 빠른 것이고 Next는 상대적으로 좀 느린 것 같네요 😢
속도가 많이 신경 쓰인다면 바로 고치는게 맞지만 그렇지 않다면 빌드를 해보고 판단하는게 좋을 것 같습니다.

[MinwooP]

노철님 질문 내용은 저도 혜수님 답변에 동의합니다 !!!

[MinwooP]

이 useLogin 훅은 로그인 된 유저가 로그인 페이지에 접근했을 때, /home으로 이동시켜주는 훅 같은데, 다시 뒤로가기 했을 때 로그인 페이지로 접근하지 못하도록 하는 게 좋을 것 같아서 router.push 보다는 router.replace를 사용하는 게 좋지 않을까 생각합니닷 !!

Suggested change

	export default function useLogin() {
	const { auth } = useAuth();
	const router = useRouter();
	useEffect(() => {
	if (auth !== null) router.push('/home');
	export default function useLogin() {
	const { auth } = useAuth();
	const router = useRouter();
	useEffect(() => {
	if (auth !== null) router.replace('/home');