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 = st..

import { createUserWithEmailAndPassword, updateProfile } from "firebase/auth";import { auth } from "../firebase";import { useState } from "react";import { Link, useNavigate } from "react-router-dom";import { FirebaseError } from "firebase/app";import GithubButton from "../component/github-btn";import styled from "styled-components";const Switcher = styled.p` color: white; a { color..

import { auth } from "../firebase";import React from "react";import { useState } from "react";import { Link, useNavigate } from "react-router-dom";import { FirebaseError } from "firebase/app";import { signInWithEmailAndPassword } from "firebase/auth";import GithubButton from "../component/github-btn";import styled from "styled-components";const Switcher = styled.p` color: white; a { ..

import React from "react";import { Navigate } from 'react-router-dom';import { useAuthState } from 'react-firebase-hooks/auth';import { getAuth } from 'firebase/auth';const auth = getAuth();// Firebase Authentication 서비스의 인스턴스를 가져오는 코드const ProtectedRoute = ({ children }) => { const [user, loading] = useAuthState(auth); if (loading) { return Loading...; } if (!user) { return ; // re..

import { Outlet, Link, useNavigate } from "react-router-dom";import styled from "styled-components";import { auth } from "../firebase";import { useState, useEffect } from "react";import { onAuthStateChanged } from "firebase/auth";import { signOut } from "firebase/auth";const Wrapper = styled.div` @media (max-width: 600px) { grid-template-rows: auto 1fr auto; /* 헤더, 메인, 푸터 */ grid-template..

라우팅을 하여 연결될 (렌더링 될) 컴포넌트를 설정하고, ProtectedRoute를 통해 인증된 사용자만 접근할 수 있는 컴포넌트를 구분하며,사용자 인증 상태 변화 (로그인이 되었는지)를  확인하여 로딩을 해제시키고, 인증 상태가 완료될 때까진 로딩 화면을 표시하게 한다 import { RouterProvider, createBrowserRouter } from "react-router-dom";import styled from "styled-components";import React, { useState, useEffect } from "react";import { auth } from "./firebase";import ProtectedRoute from "./component/protected-..