Merge branch 'deploy'

jaewoogwak · Mar 13, 2024 · 6644c84 · 6644c84
2 parents baf5f20 + 3308536
commit 6644c84
Show file tree

Hide file tree

Showing 9 changed files with 707 additions and 374 deletions.
diff --git a/dist/assets/index-r7BEd1x9.js → dist/assets/index-RH-KUota.js b/dist/assets/index-r7BEd1x9.js → dist/assets/index-RH-KUota.js
diff --git a/dist/index.html b/dist/index.html
@@ -6,12 +6,8 @@
 
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Vite + React</title>
-        <script
-            type="module"
-            crossorigin
-            src="/assets/index-r7BEd1x9.js"
-        ></script>
-        <link rel="stylesheet" crossorigin href="/assets/index-i1mqdfT8.css" />
+      <script type="module" crossorigin src="/assets/index-RH-KUota.js"></script>
+      <link rel="stylesheet" crossorigin href="/assets/index-i1mqdfT8.css">
     </head>
     <body>
         <div id="root"></div>

diff --git a/src/assets/login_left_circle.png b/src/assets/login_left_circle.png
diff --git a/src/assets/login_main.png b/src/assets/login_main.png
diff --git a/src/assets/login_right_circle.png b/src/assets/login_right_circle.png
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
diff --git a/src/assets/logo2.png b/src/assets/logo2.png
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -1,33 +1,50 @@
 import React from 'react';
 import styled from 'styled-components';
 import LogoSvg from '../assets/logo.svg';
+import logo2 from '../assets/logo2.png';
 import title from '../assets/title.png';
 
-import { Link, useNavigate } from 'react-router-dom';
+import { Link, useNavigate, NavLink } from 'react-router-dom';
 import { auth } from '../services/firebase';
 
+
+
 const Header = () => {
+    const activeStyle = {
+        color: "#6392ff",
+      };
+
     return (
         <HeaderWrapper>
             <HeaderItemWrapper>
-                <Logo
+                <TitleWrapper
                     onClick={() => {
                         window.location.href = '/';
                     }}
                 >
-                    <LogoImage src={title} alt='logo' />
-                </Logo>
+                    <LogoSvgWrapper src={logo2} alt='logo' />
+
+                    <Title>Study Mentor</Title>
+                </TitleWrapper>
 
-                <FileUploadLink to='/'>파일 업로드</FileUploadLink>
-                <ChatbotLink to='/chatbot'>챗봇</ChatbotLink>
+                <FileUploadLink to='/'
+                    activeClassName='activeLink'
+                    style={({ isActive }) => (isActive ? activeStyle : {})}
+                >파일 업로드</FileUploadLink>
+                <ChatbotLink to='/chatbot'
+                    activeClassName='activeLink'
+                    style={({ isActive }) => (isActive ? activeStyle : {})}
+
+
+                >챗봇</ChatbotLink>
             </HeaderItemWrapper>
             <Logout
                 onClick={() => {
                     auth.signOut();
                     // auth.logout();
                 }}
             >
-                logout
+                로그아웃
             </Logout>
         </HeaderWrapper>
     );
@@ -41,6 +58,10 @@ const Wrapper = styled.div`
     padding-bottom: 50px;
 `;
 
+const LogoSvgWrapper = styled.img`
+    width: 60px;
+`;
+
 const HeaderItemWrapper = styled.div`
     display: flex;
     flex-direction: row;
@@ -56,7 +77,7 @@ const HeaderWrapper = styled.div`
     flex-wrap: wrap;
 
     height: 80px;
-    border-bottom: 1px solid #aecfff;
+    border-bottom: 1px solid #e0e0e0;
 
     padding-right: 30px;
 `;
@@ -70,19 +91,46 @@ const LogoImage = styled.img`
     width: 230px;
     height: 50px;
 `;
+const TitleWrapper = styled.div`
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    justify-content: center;
+    margin-left: 45px;
 
-const FileUploadLink = styled(Link)`
+    cursor: pointer;
+`;
+
+const Title = styled.div`
+    color: #fd9f28;
+
+    text-align: center;
+    font-family: 'Passion One';
+    font-size: 40px;
+    font-style: normal;
+    font-weight: 900;
+    line-height: normal;
+`;
+
+const FileUploadLink = styled(NavLink)`
     margin-left: 125px;
     font-size: 24px;
-    color: #ab41ff;
+    color: black;
     text-decoration: none;
+    font-family: 'Red Hat Text';
+    font-weight: 600;
+
 `;
 
-const ChatbotLink = styled(Link)`
+const ChatbotLink = styled(NavLink)`
     /* margin-left: 42px; */
     font-size: 24px;
     text-decoration: none;
     color: black;
+    font-family: 'Red Hat Text';
+    font-weight: 600;
+
+
 `;
 
 const Logout = styled.div`
@@ -95,4 +143,6 @@ const Logout = styled.div`
     text-decoration: none;
     color: black;
     cursor: pointer;
+    font-family: 'Red Hat Text';
+    font-weight: 600;
 `;
diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx
@@ -1,6 +1,9 @@
 import React, { useEffect } from 'react';
 import styled from 'styled-components';
-import title from '../assets/title.png';
+import login_main from '../assets/login_main.png';
+import login_left_circle from '../assets/login_left_circle.png';
+import login_right_circle from '../assets/login_right_circle.png';
+
 import google from '../assets/google.png';
 import {
     getAuth,
@@ -15,7 +18,7 @@ import { db } from '../services/firebase';
 
 const provider = new GoogleAuthProvider();
 
-const NewLogin = () => {
+const NewLoginPage = () => {
     const auth = getAuth();
     const navigate = useNavigate();
     const { user, login, logout } = useAuth();
@@ -61,80 +64,128 @@ const NewLogin = () => {
     }, []);
 
     return (
-        <Wrapper>
-            <LogoContainer>
-                <LogoImage src={title} />
-            </LogoContainer>
-            <LoginContainer>
-                나만의 학습 어시스턴트 지금 시작하기
-                <GoogleLoginButton
-                    onClick={() => {
-                        handleGoogleLogin();
-                    }}
-                >
-                    <GoogleIcon src={google} alt='' />
-                    Google 로그인
-                </GoogleLoginButton>
-            </LoginContainer>
-        </Wrapper>
+        <Container>
+            <Title>Study Mentor</Title>
+            <Description>ChatGPT 기반 스터디 멘토 플랫폼</Description>
+            <LoginButton
+                onClick={() => {
+                    handleGoogleLogin();
+                }}
+            >
+                로그인
+            </LoginButton>
+            <LoginImageContainer>
+                <LoginLeftCircle
+                    src={login_left_circle}
+                    alt='login_left_circle'
+                />
+                <LoginImage src={login_main} alt='login_main' />
+                <LoginRightCircle
+                    src={login_right_circle}
+                    alt='login_right_circle'
+                />
+            </LoginImageContainer>
+        </Container>
     );
 };
 
-export default NewLogin;
+export default NewLoginPage;
 
-const Wrapper = styled.div`
+const Container = styled.div`
     display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
     height: 100vh;
     width: 100%;
     background-color: rgb(253, 253, 253);
 `;
 
-const LogoContainer = styled.div`
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    width: 50%;
-    height: 100%;
+const Title = styled.div`
+    color: #fd9f28;
+    padding: 0;
+    text-align: center;
+    margin-top: 41px;
+
+    font-size: 100px;
+    font-style: normal;
+    font-weight: 900;
+    font-family: 'Passion One';
+`;
+
+const Description = styled.div`
+    margin-top: 10px;
+    color: #000;
+
+    text-align: center;
+    font-family: 'Anek Kannada';
+    font-size: 40px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: normal;
+`;
+
+const LoginButton = styled.button`
+    width: 168px;
+    height: 62px;
+    margin-top: 38px;
+    flex-shrink: 0;
+    border-radius: 60px;
+    border: 1px solid #fd9f28;
+    background: rgba(253, 159, 40, 0.5);
+
+    text-align: center;
+    font-family: Abel;
+    font-size: 24px;
+    font-style: normal;
+
+    cursor: pointer;
+    &:hover {
+        background: #fd9f28;
+        color: #fff;
+    }
+`;
+
+const LoginFont = styled.div`
+    color: #000;
+
+    text-align: center;
+    font-family: Abel;
+    font-size: 24px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
 `;
 
-const LoginContainer = styled.div`
+const LoginImageContainer = styled.div`
     display: flex;
-    flex-direction: column;
     justify-content: center;
     align-items: center;
     width: 50%;
     height: 100%;
-    font-family: 'Noto Sans KR', sans-serif;
-    font-size: 34px;
-    font-stretch: narrower;
-    font-weight: bold;
 `;
 
-const LogoImage = styled.img`
-    width: 700px;
-    margin-left: 80px;
+const LoginImage = styled.img`
+    margin-top: 38px;
+    width: 550px;
+    object-fit: contain;
+    z-index: 3;
+    top: 20px;
+    position: relative;
 `;
 
-const GoogleLoginButton = styled.button`
+const LoginLeftCircle = styled.img`
+    position: relative;
+    top: 80px;
+    left: 40px;
+    z-index: 1;
     width: 300px;
-    height: 50px;
-    background-color: #fff;
-    border: 0.5px solid #000000bb;
-    border-radius: 10px;
-    font-size: 20px;
-    font-weight: bold;
-    cursor: pointer;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-top: 30px;
 `;
 
-const GoogleIcon = styled.img`
-    width: 30px;
-    height: 30px;
-    margin-right: 30px;
+const LoginRightCircle = styled.img`
+    width: 300px;
+    position: relative;
+    top: 20px;
+    right: 40px;
+    z-index: 1;
 `;