Github 로그인!

• 깃헙 개인 Setting ⇒ 최하단 Developer Setting ⇒ Oauth Application ⇒ Register

9ecb42d6a89c6549e1d2f48aa3850af47b75de41

회원가입을 깃헙으로!

• Register Modal에 가서 Continue with github 버튼에 onlClick에 다음과 같이 적어준다.

<Button
   outline
   label='Continue with Github'
   icon={AiFillGithub}
   onClick={() => signIn('github')}
 />

• 성공적으로 회원가입 + 로그인이 된다!

• 그럼 DB를 확인해볼까!? 깃헙으로 회원가입이 되었는지!!

  

  실제로 등록된 것을 확인할 수 있다!

• 추가로 Account 테이블에 유저가 추가 된것도 볼 수 있다.

  

  깃헙 Account에 대한 정보가 나와있다.

<aside> 💡 깃헙으로 회원가입을 하게 되면 image 프로퍼티에 값이 추가된다. 이 이미지로 로그인 했을시 아바타에 이미지를 넣어보자!

</aside>

깃헙 로그인시 주어지는 이미지로 아바타에 채우기

• UserMenu.tsx

<Avatar src={currentUser?.image} />

• Avatar 컴포넌트가 src를 props로 넘길 수 있도록 처리를 해주자!

'use client';

import Image from 'next/image';

interface AvatarProps {
	// 타입을 이렇게 처리를 했다!
  src: string | null | undefined;
}

function Avatar({ src }: AvatarProps) {
  return (
    <Image
      className='rounded-full'
      height='30'
      width='30'
      alt='Avatar'
      src={src || '/images/placeholder.jpeg'}
    />
  );
}

export default Avatar;