✨ #12 구글 로그인, 로그아웃 기능 구현

src/hooks/useAuth.ts

@@ -0,0 +1,34 @@
+import { auth } from '../firebase/firebaseConfig'
+import { onAuthStateChanged } from 'firebase/auth'
+import { useEffect, useState } from 'react'
+import { useLocation, useNavigate } from 'react-router-dom'
+
+const useAuth = () => {
+  const { pathname } = useLocation()
+  const navigate = useNavigate()
+  const [isAuthenticated, setIsAuthenticated] = useState(false)
+
+  useEffect(() => {
+    const unsubscribe = onAuthStateChanged(auth, (user) => {
+      if (user) {
+        setIsAuthenticated(true)
+        if (pathname === '/login') {
+          navigate('/')
+        }
+      } else {
+        setIsAuthenticated(false)
+        if (pathname !== '/login') {
+          navigate('/login')
+        }
+      }
+    })
+
+    return () => {
+      unsubscribe()
+    }
+  }, [pathname, navigate])
+
+  return { isAuthenticated }
+}
+
+export default useAuth

src/hooks/useLogout.ts

@@ -0,0 +1,18 @@
+import { useNavigate } from 'react-router-dom'
+import { signOut } from 'firebase/auth'
+import { auth } from '../firebase/firebaseConfig'
+
+const useLogout = () => {
+  const navigate = useNavigate()
+  const logout = async () => {
+    await signOut(auth)
+      .then(() => {
+        navigate('/login')
+      })
+      .catch((error) => console.error(error))
+  }
+
+  return logout
+}
+
+export default useLogout

src/layout/Root.tsx

@@ -1,15 +1,28 @@
 import styled from '@emotion/styled'
-import { Outlet } from 'react-router-dom'
+import { Outlet, useLocation, useNavigate } from 'react-router-dom'
+import useAuth from '../hooks/useAuth'
 import Navbar from '../components/layout/Navbar'
 import Header from '../components/layout/Header'
 
-const RootLayout = () => (
-  <StyledContainer>
-    <Header />
-    <Outlet />
-    <Navbar />
-  </StyledContainer>
-)
+const RootLayout = () => {
+  const location = useLocation()
+  const navigate = useNavigate()
+  const { isAuthenticated } = useAuth()
+
+  if (isAuthenticated && location.pathname === '/login') {
+    navigate('/')
+  }
+
+  return (
+    <StyledContainer>
+      {isAuthenticated && location.pathname !== '/login' && <Header />}
+      <Outlet />
+      {isAuthenticated && location.pathname !== '/login' && <Navbar />}
+    </StyledContainer>
+  )
+}
+
+export default RootLayout
 
 const StyledContainer = styled.div`
   min-width: 500px;
@@ -24,5 +37,3 @@ const StyledContainer = styled.div`
   justify-content: space-between;
   align-items: center;
 `
-
-export default RootLayout

src/pages/EditProfilePage.tsx

@@ -1,5 +1,23 @@
+import styled from '@emotion/styled'
+import useLogout from '../hooks/useLogout'
+
 const EditProfilePage = () => {
-  return <div>EditProfile</div>
+  return (
+    <div>
+      EditProfile
+      <LogoutButton onClick={useLogout()}>로그아웃</LogoutButton>
+    </div>
+  )
 }
 
 export default EditProfilePage
+
+const LogoutButton = styled.button`
+  border-radius: 0.3rem;
+  vertical-align: center;
+  align-items: center;
+  font-size: 0.8rem;
+  width: 180px;
+  display: flex;
+  text-align: center;
+`

src/pages/LoginPage.tsx

@@ -1,5 +1,54 @@
+import styled from '@emotion/styled'
+import { GoogleAuthProvider, signInWithPopup } from 'firebase/auth'
+import { auth } from '../firebase/firebaseConfig'
+
 const LoginPage = () => {
-  return <div>Login</div>
+  const handleGoogleLogin = async () => {
+    const provider = new GoogleAuthProvider()
+    try {
+      const res = await signInWithPopup(auth, provider)
+      localStorage.setItem('userData', JSON.stringify(res.user))
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  return (
+    <Contaier>
+      <div className="google_login">
+        <button className="google_btn" onClick={handleGoogleLogin}>
+          <img
+            className="google_logo"
+            width="20"
+            height="20"
+            src="https://img.icons8.com/color/48/google-logo.png"
+            alt="google-logo"
+          />
+          구글 로그인
+        </button>
+      </div>
+    </Contaier>
+  )
 }
 
 export default LoginPage
+
+const Contaier = styled.div`
+  .google_logo {
+    align-items: center;
+  }
+  .google_login {
+    display: flex;
+    flex-direction: column;
+  }
+  .google_btn {
+    border-radius: 0.3rem;
+    vertical-align: center;
+    justify-content: center;
+    align-items: center;
+    font-size: 0.8rem;
+    gap: 7px;
+    display: flex;
+    text-align: center;
+  }
+`

src/pages/ProfilePage.tsx

@@ -1,5 +1,14 @@
+import { Outlet } from 'react-router-dom'
+import { Link } from 'react-router-dom'
+import { PATH } from '../constants/path'
 const ProfilePage = () => {
-  return <div>Profile</div>
+  return (
+    <div>
+      Profile Page
+      <Link to={PATH.EDITPROFILE}>Edit Profile</Link>
+      <Outlet />
+    </div>
+  )
 }
 
 export default ProfilePage