Merge pull request #40 from TEAM-MOAMOA/feat/Login/#39

[ feat ] 로그인 뷰 구현

src/Router.tsx

@@ -11,6 +11,7 @@ import RecommendedTeacherPage from "./pages/RecommendedTeacherPage";
 import Class from "./pages/Class";
 import Writing from "./pages/Writing";
 import ProfilePage from "./pages/ProfilePage";
+import LoginPage from "./pages/LoginPage";
 
 
 export default function Router() {
@@ -28,6 +29,7 @@ export default function Router() {
           <Route path="/class" element={<Class/>} />
           <Route path="/writing" element={<Writing/>} />
           <Route path="/profile" element={<ProfilePage/>} />
+          <Route path="/login" element={<LoginPage/>} />
         </Routes>
       </BrowserRouter>
     );

src/assets/index.ts

@@ -21,3 +21,6 @@ export { ReactComponent as ChattingActiveIcon} from './icon/chattingActiveIcon.s
 export { ReactComponent as HomeNotActiveIcon} from './icon/homeNotActiveIcon.svg';
 export { ReactComponent as ProfileActiveIcon} from './icon/profileActiveIcon.svg';
 export { ReactComponent as WritingIcon } from './icon/writingIcon.svg';
+
+export { ReactComponent as KakaoIcon } from './icon/kakaoIcon.svg';
+export { ReactComponent as GoogleIcon } from './icon/googleIcon.svg';

src/atom/LoginInfo.ts

@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const IsLoggedInState = atom({
+  key: 'isLoggedIn',
+  default: false,
+});

src/pages/LoginPage.tsx

@@ -1,13 +1,17 @@
-import { useState, useEffect } from 'react';
+import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { auth } from '../firebase';
 import { GoogleAuthProvider, signInWithPopup, signInWithRedirect } from 'firebase/auth';
 import { styled } from 'styled-components';
+import { GoogleIcon, KakaoIcon, StarIcon } from '../assets';
+import { useRecoilState } from 'recoil';
+import { IsLoggedInState } from '../atom/LoginInfo';
 
 export default function LoginPage() {
+
   const navigate = useNavigate();
 
-  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [isLoggedIn, setIsLoggedIn] = useRecoilState(IsLoggedInState);
 
   useEffect(() => {
     const unsubscribe = auth.onAuthStateChanged((user) => {
@@ -17,7 +21,7 @@ export default function LoginPage() {
   }, []);
 
   // 로그인
-  const handleLogin = () => {
+  const handleGoogleLogin = () => {
     const provider = new GoogleAuthProvider();
     signInWithPopup(auth, provider)
       .then((data) => {
@@ -32,34 +36,97 @@ export default function LoginPage() {
       });
   };
 
-  // 로그아웃
-  const handleLogout = () => {
-    auth.signOut()
-      .then(() => {
-        setIsLoggedIn(false);
-        navigate('/');
-      })
-      .catch((error) => {
-        console.log(error)
-      })
-  }
-
   return (
-    <St.LoginWrapper>
-      {isLoggedIn ? (
-        <St.LoginButton onClick={handleLogout}>로그아웃</St.LoginButton>
-      ):(
-        <St.LoginButton onClick={handleLogin}>로그인</St.LoginButton>
-      )}
-    </St.LoginWrapper>
+    <St.LoginPageWrapper>
+      <St.AppNameContainer>
+        <St.Explain>부모들의 재능을</St.Explain>
+        <St.AppName>모아모아</St.AppName>
+      </St.AppNameContainer>
+      <St.AppLogoContainer>
+        <St.AppLogo/>
+      </St.AppLogoContainer>
+      <St.LoginButtonContainer>
+        <StKakaoLoginButton>
+          <KakaoIcon/>
+          <St.Text>카카오톡으로 계속하기</St.Text>
+        </StKakaoLoginButton>
+        <StGoogleLoginButton onClick={handleGoogleLogin}>
+          <GoogleIcon/>
+          <St.Text>Google로 계속하기</St.Text>
+        </StGoogleLoginButton>
+        <St.EmailLoginLink >다른 이메일로 계속하기</St.EmailLoginLink>
+      </St.LoginButtonContainer>
+    </St.LoginPageWrapper>
+
   );
 }
 
 const St = {
-  LoginWrapper: styled.div`
+  LoginPageWrapper: styled.div`
+    width: 100%;
 
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  `,
+  AppNameContainer: styled.div`
+    display: flex;
+    flex-direction: column;
+
+    margin: 0 3rem;
+  `,
+  AppLogoContainer: styled.div`
+    display: flex;
+    justify-content: center;
+
+    margin: 7rem 0;
+  `,
+  LoginButtonContainer: styled.div`
+    display: flex;
+    flex-direction: column;
+
+    text-align: center;
+  `,
+  AppLogo: styled(StarIcon)`
+    width: 8rem;
+    height: 8rem;
   `,
-  LoginButton: styled.button`
+  CommonButton: styled.button`
+    display: flex;
+    align-items: center;
+
+    margin: 0.6rem 2rem; 
+    padding: 1rem 1.5rem;
+
+    border-radius: 1rem;
+  `,
+  Explain: styled.div`
+    margin: 1.5rem 0;
+
+    ${({theme}) => theme.fonts.title02};
+  `,
+  AppName: styled.div`
+    ${({theme}) => theme.fonts.title01};
+  `,
+  Text: styled.div`
+    flex: 1;
+    padding-right: 1.5rem;
+    ${({theme}) => theme.fonts.body06};
+  `,
+  EmailLoginLink: styled.a`
+    margin: 0.7rem 0;
+
     ${({theme}) => theme.fonts.body07};
+    color: ${({ theme }) => theme.colors.Black};
   `
-}
+
+
+}
+
+const StKakaoLoginButton = styled(St.CommonButton)`
+  background-color: ${({ theme }) => theme.colors.Kakao};
+`
+
+const StGoogleLoginButton = styled(St.CommonButton)`
+  border: 0.1rem solid ${({theme}) => theme.colors.Gray_2};
+`

src/style/theme.ts

@@ -6,14 +6,21 @@ const colors = {
   SUB_1: "#E63636",
   SUB_2: "#FBD262",
   Blue: "#0094FF",
+  Blue_2: "#3771DF",
+  Blue_3: "#386ED0",
   Black: "#3C3C3C",
   Black_3: "#9D9D9D",
   White: "#FFFFFF",
   Gray: "#E6E6E6",
+  Gray_2: "#D9D9D9",
+  Gray_3: "#C8C8C8",
+  Gray_4: "#646464",
+  GrayBtn: "#EBEBEB",
   Yellow_1: "#FFDB20",
   Yellow_2: "#FEFBE8",
   Yellow_3: "#EAC955",
   Red: "#FB6262",
+  Kakao: "#FCE302"
 };
 
 export type ColorsTypes = typeof colors;