Skip to content

Commit

Permalink
Merge pull request #7 from SugarSyrup/feature/#4
Browse files Browse the repository at this point in the history
Feature/#4 isLoginTemplate 완성, 로그아웃, 닉네임 설정 함수 구현
  • Loading branch information
SugarSyrup authored Feb 11, 2024
2 parents fe66dc1 + b6112f2 commit 1605bfb
Show file tree
Hide file tree
Showing 5 changed files with 167 additions and 138 deletions.
13 changes: 6 additions & 7 deletions .env
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
REACT_APP_API_KEY="AIzaSyAF0pdgtSx3boMRUnIcN3Op0lrySJH_6Ng"
REACT_APP_AOUT_DOMAIN="growthmemory-1ea05.firebaseapp.com"
REACT_APP_PROJECT_ID="growthmemory-1ea05"
REACT_APP_STORAGE_BUCKET="growthmemory-1ea05.appspot.com"
REACT_APP_MESSAGEING_SENDER_ID="1051732433529"
REACT_APP_APP_ID="1:1051732433529:web:7d1d844cf3df322eded2a8"

REACT_APP_API_KEY="AIzaSyD_HOQiMwjoWg5pSnKb332UCVxE8C_Tl_k"
REACT_APP_AOUT_DOMAIN="growth-memory.firebaseapp.com"
REACT_APP_PROJECT_ID="growth-memory"
REACT_APP_STORAGE_BUCKET="growth-memory.appspot.com"
REACT_APP_MESSAGEING_SENDER_ID="875889764726"
REACT_APP_APP_ID="1:875889764726:web:47ad150f915d82f2beb257"
48 changes: 24 additions & 24 deletions src/pages/CollectPersonalData.jsx
Original file line number Diff line number Diff line change
@@ -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; */
`;
173 changes: 87 additions & 86 deletions src/pages/Home.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,106 +10,107 @@ import { BiSolidMedal } from "react-icons/bi"; //예비1
import { IoRibbonSharp } from "react-icons/io5"; //예비2
import { SlBadge } from "react-icons/sl";
import Navigation from "../components/common/Navigation";
import { onSignOut } from "../service/auth";
export default function Home() {
return (
<HomeProvider>
<HomeHeader />
<Section>
<Btn>
<LuPencilLine className="leftIcon" />
오늘의 회고를 작성해주세요
<FaAngleRight className="rigntIcon" />
</Btn>
<CalendarDiv>
<div className="title">
<span>
<BsPinAngleFill className="pinIcon" /> 얼마나 꾸준히 했는지
살펴보세요
</span>
</div>
<SteadyCalendar />
</CalendarDiv>
<PerformanceDiv>
<div className="title">
<span>
<IoRibbonSharp className="medalIcon" />
성과를 확인해보세요
</span>
</div>
<Performance />
</PerformanceDiv>
</Section>
<Navigation />
</HomeProvider>
);
return (
<HomeProvider>
<HomeHeader />
<Section>
<Btn>
<LuPencilLine className="leftIcon" />
오늘의 회고를 작성해주세요
<FaAngleRight className="rigntIcon" />
</Btn>
<CalendarDiv>
<div className="title">
<span>
<BsPinAngleFill className="pinIcon" /> 얼마나 꾸준히
했는지 살펴보세요
</span>
</div>
<SteadyCalendar />
</CalendarDiv>
<PerformanceDiv>
<div className="title">
<span>
<IoRibbonSharp className="medalIcon" />
성과를 확인해보세요
</span>
</div>
<Performance />
</PerformanceDiv>
</Section>
<Navigation />
</HomeProvider>
);
}

const Section = styled.section`
width: 100%;
height: 421px;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 421px;
display: flex;
flex-direction: column;
align-items: center;
`;

const Btn = styled.button`
margin-bottom: 27px;
width: 311px;
height: 45px;
border: none;
border-radius: 5px;
color: #f9f9f9;
font-size: 14px;
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.25);
display: flex;
align-items: center;
position: relative;
background-color: #5ac479;
margin-bottom: 27px;
width: 311px;
height: 45px;
border: none;
border-radius: 5px;
color: #f9f9f9;
font-size: 14px;
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.25);
display: flex;
align-items: center;
position: relative;
background-color: #5ac479;
.leftIcon {
margin: 0 14px 0 17px;
}
.rigntIcon {
position: absolute;
right: 12px;
}
.leftIcon {
margin: 0 14px 0 17px;
}
.rigntIcon {
position: absolute;
right: 12px;
}
`;

const CalendarDiv = styled.div`
margin-bottom: 26px;
width: 312px;
height: 200px;
margin-bottom: 26px;
width: 312px;
height: 200px;
.title {
width: 100%;
height: 30px;
font-size: 16px;
font-weight: 600;
}
.pinIcon {
margin-right: 2px;
color: red;
font-size: 18px;
position: relative;
top: 4px;
}
.title {
width: 100%;
height: 30px;
font-size: 16px;
font-weight: 600;
}
.pinIcon {
margin-right: 2px;
color: red;
font-size: 18px;
position: relative;
top: 4px;
}
`;

const PerformanceDiv = styled.div`
width: 312px;
height: 110px;
width: 312px;
height: 110px;
.title {
width: 100%;
height: 30px;
font-size: 16px;
font-weight: 600;
}
.medalIcon {
margin-right: 2px;
color: #ecef5a;
font-size: 18px;
position: relative;
top: 4px;
}
.title {
width: 100%;
height: 30px;
font-size: 16px;
font-weight: 600;
}
.medalIcon {
margin-right: 2px;
color: #ecef5a;
font-size: 18px;
position: relative;
top: 4px;
}
`;
21 changes: 13 additions & 8 deletions src/pages/IsLoginTemplate.jsx
Original file line number Diff line number Diff line change
@@ -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;
50 changes: 37 additions & 13 deletions src/service/auth.js
Original file line number Diff line number Diff line change
@@ -1,21 +1,45 @@
import { GoogleAuthProvider, getAuth, signInWithPopup } from "firebase/auth";
import {
GoogleAuthProvider,
getAuth,
signInWithPopup,
signOut,
updateProfile,
} from "firebase/auth";
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;
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);
});
};

export const onSignOut = async () => {
try {
await signOut(auth);
} catch (error) {
console.log(error);
}
};

export const setDisplayName = async (displayName) => {
updateProfile(auth.currentUser, {
displayName: displayName,
})
.catch((err) => {
const errorCode = err.code;
const errorMessage = err.message;
const email = err.customData.email;
const credential = GoogleAuthProvider.credentialFromError(err);
});
.then(() => {})
.catch((error) => {
console.log(error);
});
};

0 comments on commit 1605bfb

Please sign in to comment.