Merge pull request #35 from DeveloperBlog-Devflow/feature/login-page

feat: github 회원가입 시 유저 정보 DB에 저장

Author: moo1677

api/signup.api.ts

@@ -1,16 +1,20 @@
 import { auth, db } from '@/lib/firebase';
-import { createUserWithEmailAndPassword, updateProfile } from 'firebase/auth';
-import { doc, serverTimestamp, setDoc } from 'firebase/firestore';
+import {
+  createUserWithEmailAndPassword,
+  updateProfile,
+  GithubAuthProvider,
+  signInWithPopup,
+  getAdditionalUserInfo,
+} from 'firebase/auth';
+import { getDoc, doc, serverTimestamp, setDoc } from 'firebase/firestore';
 
 export type SignupPayload = {
   nickname: string;
   email: string;
   password: string;
-  streakDays: number;
-  tilCount: number;
 };
 
-export async function signupWithEmail(p: SignupPayload) {
+export const signupWithEmail = async (p: SignupPayload) => {
   const cred = await createUserWithEmailAndPassword(auth, p.email, p.password);
   await updateProfile(cred.user, { displayName: p.nickname });
   await setDoc(doc(db, 'users', cred.user.uid), {
@@ -21,4 +25,31 @@ export async function signupWithEmail(p: SignupPayload) {
     tilCount: 0,
   });
   return cred.user;
-}
+};
+
+export const signupWithGithub = async () => {
+  const provider = new GithubAuthProvider();
+
+  const result = await signInWithPopup(auth, provider);
+  const user = result.user;
+
+  const info = getAdditionalUserInfo(result);
+  const githubUsername = info?.username ?? null;
+
+  const userRef = doc(db, 'users', user.uid);
+  const snap = await getDoc(userRef);
+
+  if (!snap.exists()) {
+    await setDoc(userRef, {
+      userId: user.uid,
+      nickname: user.displayName ?? githubUsername ?? '익명',
+      email: user.email ?? '',
+      provider: 'github.com',
+      githubUsername,
+      createdAt: serverTimestamp(),
+      streakDays: 0,
+      tilCount: 0,
+    });
+  }
+  return user;
+};

components/auth/LoginForm.tsx

@@ -5,14 +5,10 @@ import { FaGithub } from 'react-icons/fa';
 import Button from '@/components/auth/Button';
 import Link from 'next/link';
 import { auth } from '@/lib/firebase';
-import {
-  GithubAuthProvider,
-  signInWithEmailAndPassword,
-  signInWithPopup,
-  UserCredential,
-} from 'firebase/auth';
+import { signInWithEmailAndPassword } from 'firebase/auth';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
+import { signupWithGithub } from '@/api/signup.api';
 
 type LoginFormProps = {
   handleOpenModal: () => void;
@@ -26,20 +22,17 @@ const LoginForm = ({ handleOpenModal }: LoginFormProps) => {
 
   const router = useRouter();
 
-  const githubProvider = new GithubAuthProvider();
-
   const handleGithubLogin = async () => {
+    if (isLoading) return;
+    setIsLoading(true);
+    setError('');
     try {
-      const result: UserCredential = await signInWithPopup(
-        auth,
-        githubProvider
-      );
-      const user = result.user;
-      // console.log('로그인 성공 : ', user);
+      await signupWithGithub();
       router.push('/');
     } catch (err: unknown) {
-      if (err instanceof Error) {
-      }
+      setError('Github 로그인에 실패했습니다.');
+    } finally {
+      setIsLoading(false);
     }
   };