feat(GrowthMemory#4): isLoginTemplate 수정, 로그인 정보 확인

src/pages/CollectPersonalData.jsx

@@ -1,38 +1,38 @@
 import HeaderBox from "../components/common/header/HeaderBox";
 import Button from "../components/common/Button";
 import Terms from "../components/common/Terms";
-import TermsBox from "../components/collectPersonalData/TermsBox";
+import TermsBox from "../components/CollectPersonalData/TermsBox";
 import styled from "styled-components";
 import { Context } from "../components/context/context";
 import { useContext } from "react";
 import SignUpProvider from "../components/provider/SignUpPovider";
 import BackHeader from "../components/common/header/BackHeader";
 
 export default function CollectPersonalData() {
-  return (
-    <>
-      <SignUpProvider>
-        <BackHeader />
-        <Section>
-          <HeaderBox>
-            <span>서비스 이용을 위해</span>
-            <span>{"약관 동의를 해주세요 :)"}</span>
-          </HeaderBox>
-          <Button text={"agree"} />
-          <TermsBox />
-          <Button text={"next"} />
-        </Section>
-      </SignUpProvider>
-    </>
-  );
+    return (
+        <>
+            <SignUpProvider>
+                <BackHeader />
+                <Section>
+                    <HeaderBox>
+                        <span>서비스 이용을 위해</span>
+                        <span>{"약관 동의를 해주세요 :)"}</span>
+                    </HeaderBox>
+                    <Button text={"agree"} />
+                    <TermsBox />
+                    <Button text={"next"} />
+                </Section>
+            </SignUpProvider>
+        </>
+    );
 }
 
 const Section = styled.section`
-  width: 360px;
-  height: 500px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-  /* background-color: aqua; */
+    width: 360px;
+    height: 500px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    /* background-color: aqua; */
 `;

src/pages/IsLoginTemplate.jsx

@@ -1,17 +1,22 @@
 import { useNavigate } from "react-router-dom";
 import { useEffect } from "react";
-import { firebaseAuth } from "../service/firebaseConfig";
+import { onAuthStateChanged } from "firebase/auth";
+import { auth } from "../service/auth";
 
 function IsLoginTemplate(props) {
-  const navigate = useNavigate();
+    const navigate = useNavigate();
 
-  useEffect(() => {
-    if (firebaseAuth.currentUser) {
-      navigate("/Home");
-    }
-  }, []);
+    useEffect(() => {
+        onAuthStateChanged(auth, (user) => {
+            if (user) {
+                navigate("/Home");
+            } else {
+                navigate("/Login");
+            }
+        });
+    }, [auth]);
 
-  return <>{props.children}</>;
+    return <>{props.children}</>;
 }
 
 export default IsLoginTemplate;

src/service/auth.js

@@ -3,19 +3,19 @@ import { firebaseAuth } from "./firebaseConfig";
 
 const provider = new GoogleAuthProvider();
 
-const auth = firebaseAuth;
+export const auth = firebaseAuth;
 
 export const signInWithGoogle = () => {
-  signInWithPopup(auth, provider)
-    .then((result) => {
-      const credential = GoogleAuthProvider.credentialFromResult(result);
-      const token = credential.accessToken;
-      const user = result.user;
-    })
-    .catch((err) => {
-      const errorCode = err.code;
-      const errorMessage = err.message;
-      const email = err.customData.email;
-      const credential = GoogleAuthProvider.credentialFromError(err);
-    });
+    signInWithPopup(auth, provider)
+        .then((result) => {
+            const credential = GoogleAuthProvider.credentialFromResult(result);
+            const token = credential.accessToken;
+            const user = result.user;
+        })
+        .catch((err) => {
+            const errorCode = err.code;
+            const errorMessage = err.message;
+            const email = err.customData.email;
+            const credential = GoogleAuthProvider.credentialFromError(err);
+        });
 };