[개인 포트폴리오] [클라이밍 커뮤니티 SNS] 2. 코드 분석 <github-btn.js>

2024. 12. 20. 10:52웹개발 포트폴리오

728x90
반응형
import React, { useEffect } from "react";
import {
  GoogleAuthProvider,
  GithubAuthProvider,
  signInWithRedirect,
  getRedirectResult,
} from "firebase/auth";
import { auth } from "../firebase"; // Firebase 설정
import { useNavigate } from "react-router-dom";
import styled from "styled-components";
import { getDoc, setDoc, doc } from "firebase/firestore";
import { db } from "../firebase";

const Button = styled.span`
  border: 2px solid white;
  color: white;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 17vw;
  height: 6vh;
  border-radius: 5rem;
  padding: 0.5rem 0.7rem;
  opacity: 0.9;
  margin-bottom: 2vh;

    @media (max-width: 768px) {
    width: 60vw;
  }
`;

const Logo = styled.img`
  width: 3vw;

    @media (max-width: 768px) {
    width: 8vw;
  }
`;

const googleProvider = new GoogleAuthProvider();
const githubProvider = new GithubAuthProvider();

export default function AuthButtons() {
  const navigate = useNavigate();

  // 리다이렉트 결과 처리
  useEffect(() => {
    const checkRedirectResult = async () => {
      try {
        const result = await getRedirectResult(auth);
        if (result) {
          const user = result.user;

          // Firestore에 사용자 정보 저장
          const userDocRef = doc(db, "users", user.uid);
          const docSnap = await getDoc(userDocRef);

          if (!docSnap.exists()) {
            await setDoc(userDocRef, {
              displayName: user.displayName || "익명",
              photoURL: user.photoURL || "/guest.png",
            });
          }

          navigate("/"); // 로그인 성공 시 홈으로 이동
        }
      } catch (error) {
        console.error("리다이렉트 결과 처리 중 오류:", error);
      }
    };

    checkRedirectResult();
  }, [navigate]);

  // Google 로그인 처리
  const loginWithGoogle = () => {
    signInWithRedirect(auth, googleProvider);
  };

  // GitHub 로그인 처리
  const loginWithGithub = () => {
    signInWithRedirect(auth, githubProvider);
  };

  return (
    <>
      <Button onClick={loginWithGithub}>        
        <Logo src="/github.png" alt="Github Logo" />
        Continue with GitHub
      </Button>
      <Button onClick={loginWithGoogle}>
        <Logo src="/google.png" alt="Google Logo" />
        Continue with Google
      </Button>
    </>
  );
}
728x90
반응형