1. 커스텀 훅 만들기 useLoginModal.ts

• 로그인 모달을 컨트롤(state, isOpen, setOpen, setClose) 하는 커스텀 훅

2. 회원가입 모달과는 별개로 로그인 모달을 하나더 만든다.

• 컴포넌트이름 LoginModal.tsx 하나 만든다.
• Layout.tsx에 전역에 LoginModal을 import 해서 띄워놓는다.

3. Login onSubmit 함수 === ‘credentials’를 이용함

<aside> 💡 signIn을 할시에 [...nextauth].ts에 선언해놓은 CredentialsProvider({…뭐시기}) 가 실행되면서 로그인이 진행되는 것 같다.

</aside>

import { signIn } from 'next-auth/react';

const onSubmit: SubmitHandler<FieldValues> = (data) => {
    setIsLoading(true);
		
		// 여기서 SignIn을 하면 [...nextauth].ts에 선언해놓은 
    signIn('credentials', { ...data, redirect: false }).then((callback) => {
      setIsLoading(false);
      // 로그인에 성공했을때
      if (callback?.ok) {
        toast.success('Logged in');
        router.refresh();
        loginModal.onClose();
      }

      // 로그인에 실패했을때
      if (callback?.error) {
        toast.error(callback.error);
      }
    });
  };

4. 실제 로그인을 해보자!

• ID(email) : [email protected]m
• PW : rhrbtlr91

5. 증거 사진