[개인 포트폴리오] [클라이밍 커뮤니티 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
반응형
'웹개발 포트폴리오' 카테고리의 다른 글
[개인 포트폴리오] [클라이밍 커뮤니티 SNS] 2. 코드 분석 <profile.js> (0) | 2024.12.20 |
---|---|
[개인 포트폴리오] [클라이밍 커뮤니티 SNS] 2. 코드 분석 <loading-screen.js> (0) | 2024.12.20 |
[개인 포트폴리오] [클라이밍 커뮤니티 SNS] 2. 코드 분석 <create-account.js> (0) | 2024.12.20 |
[개인 포트폴리오] [클라이밍 커뮤니티 SNS] 2. 코드 분석 <login.js> (0) | 2024.12.20 |
[개인 포트폴리오] [클라이밍 커뮤니티 SNS] 2. 코드 분석 <protected-route.js> (0) | 2024.12.20 |