From c49dc38a4c031c32cb54af9b0559bcac433e4adb Mon Sep 17 00:00:00 2001
From: jizero <jizero27@gmail.com>
Date: Sat, 24 Aug 2024 21:20:13 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20#12=20=EA=B5=AC=EA=B8=80=20?=
 =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8,=20=EB=A1=9C=EA=B7=B8=EC=95=84?=
 =?UTF-8?q?=EC=9B=83=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useAuth.ts          | 34 +++++++++++++++++++++++
 src/hooks/useLogout.ts        | 18 +++++++++++++
 src/layout/Root.tsx           | 31 ++++++++++++++-------
 src/pages/EditProfilePage.tsx | 20 +++++++++++++-
 src/pages/LoginPage.tsx       | 51 ++++++++++++++++++++++++++++++++++-
 src/pages/ProfilePage.tsx     | 11 +++++++-
 6 files changed, 152 insertions(+), 13 deletions(-)
 create mode 100644 src/hooks/useAuth.ts
 create mode 100644 src/hooks/useLogout.ts

diff --git a/src/hooks/useAuth.ts b/src/hooks/useAuth.ts
new file mode 100644
index 00000000..ea00b2e1
--- /dev/null
+++ b/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
diff --git a/src/hooks/useLogout.ts b/src/hooks/useLogout.ts
new file mode 100644
index 00000000..383f7584
--- /dev/null
+++ b/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
diff --git a/src/layout/Root.tsx b/src/layout/Root.tsx
index fa47ebfb..2893f1a0 100644
--- a/src/layout/Root.tsx
+++ b/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
diff --git a/src/pages/EditProfilePage.tsx b/src/pages/EditProfilePage.tsx
index 50355a2b..4fa9feb9 100644
--- a/src/pages/EditProfilePage.tsx
+++ b/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;
+`
diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx
index ed287e40..a12e3eea 100644
--- a/src/pages/LoginPage.tsx
+++ b/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;
+  }
+`
diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx
index 1c7d6713..4ec6177d 100644
--- a/src/pages/ProfilePage.tsx
+++ b/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