Merge pull request #59 from Beside-Potenday/seungbeom

로그인 페이지 및 마이 페이지 추가

package.json

@@ -8,6 +8,7 @@
     "@craco/craco": "^7.1.0",
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
+    "@react-oauth/google": "^0.12.1",
     "@tanstack/react-query": "^5.51.15",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",

src/App.tsx

@@ -4,13 +4,16 @@ import { ChakraProvider } from '@chakra-ui/react';
 import { theme } from '@/styles/variants/index';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { queryClient } from './api';
+import { AuthProvider } from './Provider/Auth';
 
 const App = () => {
   return (
     <ChakraProvider theme={theme}>
       <QueryClientProvider client={queryClient}>
         <MailProvider>
-          <Routes />
+          <AuthProvider>
+            <Routes />
+          </AuthProvider>
         </MailProvider>
       </QueryClientProvider>
     </ChakraProvider>

src/Provider/Auth.tsx

@@ -0,0 +1,26 @@
+import { AuthContextType, AuthInfo } from '@/types';
+import { createContext, useContext, useState, ReactNode } from 'react';
+
+export const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export const AuthProvider = ({ children }: { children: ReactNode }) => {
+  const [authInfo, setAuthInfo] = useState<AuthInfo | undefined>(undefined);
+
+  const updateAuthInfo = (auth: AuthInfo) => {
+    if (auth) {
+      setAuthInfo(auth);
+    }
+  };
+
+  return (
+    <AuthContext.Provider value={{ authInfo, updateAuthInfo }}>{children}</AuthContext.Provider>
+  );
+};
+
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+};

src/api/hooks/useGetLogin.tsx

@@ -0,0 +1,22 @@
+import { useQuery } from '@tanstack/react-query';
+import { LoginResponse } from '@/types';
+import { BASE_URL } from '..';
+import axios from 'axios';
+
+export type AuthResponse = {
+  code: string;
+};
+
+export const getLoginPath = (code: string) => `${BASE_URL}/google/login/redirect?code=${code}`;
+
+export const getLogin = async ({ code }: AuthResponse): Promise<LoginResponse> => {
+  const response = await axios.get<LoginResponse>(getLoginPath(code));
+  return response.data;
+};
+
+export const useGetLogin = (params: AuthResponse) => {
+  return useQuery<LoginResponse, Error, LoginResponse, [string, string]>({
+    queryKey: ['getLogin', params.code],
+    queryFn: () => getLogin(params),
+  });
+};

src/components/HomePage/Contents.tsx

@@ -1,21 +1,24 @@
 import { Grid, GridItem } from '@chakra-ui/react';
 import { ContentsInfo } from '@/components/HomePage/ContentsInfo';
 import { TestersBox } from './TestersBox';
-import { TopContents } from './TopContents';
 
 export const Contents = () => {
   return (
     <Grid
-      h={{ base: '2000px', md: '2500px' }} // 'md' 이상일 때 2500px, 작을 때 2000px
+      h={{ base: '1500px', md: '2000px' }} // 'md' 이상일 때 2500px, 작을 때 2000px
       w="100%"
-      templateRows={{ base: 'repeat(3, 1fr)', md: '1fr 1fr 600px' }} // 'md' 이상일 때 '1fr 1fr 600px', 작을 때 'repeat(3, 1fr)'
-      templateColumns={{ base: '1fr', md: 'repeat(1, 1fr)' }} // 'md' 이상일 때 'repeat(1, 1fr)', 작을 때 '1fr'
+      templateRows={{ base: 'auto auto', md: ' 1fr 600px' }} // 'md' 이상일 때 '1fr 1fr 600px', 작을 때 'repeat(3, 1fr)'
+      templateColumns={{ base: 'auto', md: 'repeat(1, 1fr)' }} // 'md' 이상일 때 'repeat(1, 1fr)', 작을 때 '1fr'
       gap={{ base: 50, md: 100 }} // 'md' 이상일 때 100, 작을 때 50
     >
-      <GridItem id="section1" rowSpan={1} backgroundColor={'transparent'}>
-        <TopContents />
-      </GridItem>
-      <GridItem id="section2" rowSpan={1} backgroundColor={'transparent'}>
+      <GridItem
+        id="section2"
+        rowSpan={1}
+        backgroundColor={'transparent'}
+        display="flex"
+        justifyContent={'center'}
+        gap={10}
+      >
         <TestersBox />
       </GridItem>
       <GridItem id="section3" rowSpan={1} backgroundColor={'transparent'}>

src/components/HomePage/TestersBox/Header.tsx

@@ -1,3 +1,4 @@
+import { breakpoints } from '@/styles/variants';
 import styled from '@emotion/styled';
 
 interface HeaderProps {
@@ -44,6 +45,12 @@ const Student = styled.div<StudentProps>`
   position: relative;
   z-index: 2;
   bottom: -13px;
+
+  @media (max-width: ${breakpoints.md}) {
+    bottom: 11px;
+    left: 120px;
+    box-shadow: ${(props) => (props.isActive === 'univ' ? '4px #6AB9F2' : 'none')};
+  }
 `;
 
 const Business = styled.div<BusinessProps>`
@@ -53,6 +60,12 @@ const Business = styled.div<BusinessProps>`
   position: relative;
   z-index: 2;
   bottom: -13px;
+
+  @media (max-width: ${breakpoints.md}) {
+    bottom: 11px;
+    left: 120px;
+    box-shadow: ${(props) => (props.isActive === 'business' ? '4px #6AB9F2' : 'none')};
+  }
 `;
 
 const Bar = styled.div`
@@ -61,4 +74,8 @@ const Bar = styled.div`
   height: 3px;
   position: absolute;
   bottom: 8px;
+
+  @media (max-width: ${breakpoints.md}) {
+    visibility: hidden;
+  }
 `;

src/components/HomePage/TestersBox/index.tsx

@@ -52,6 +52,7 @@ export const TestersBox = () => {
             h="100%"
             templateRows={{ base: 'auto 1fr', md: '106px 780px' }}
             templateColumns={{ base: 'repeat(1, 1fr)', md: 'repeat(1, 1fr)' }}
+            gap={5}
           >
             <MedeaItems
               rowSpan={1}
@@ -104,6 +105,7 @@ const Wrapper = styled.div`
   align-items: center;
   justify-content: center;
   overflow: hidden;
+  margin-top: 20px;
 `;
 
 const LogoWrapper = styled.div`

src/components/Layout/Header.tsx → src/components/Layout/Header/HeaderWithout.tsx

@@ -3,14 +3,8 @@ import { Link } from 'react-router-dom';
 import { Button } from '@chakra-ui/react';
 import { breakpoints } from '@/styles/variants';
 import { useMail } from '@/Provider/MailContext';
-
-const scrollToSection = (sectionId: string) => {
-  const element = document.getElementById(sectionId);
-  if (element) {
-    const elementPosition = element.getBoundingClientRect().top + window.scrollY - 80;
-    window.scrollTo({ top: elementPosition, behavior: 'smooth' });
-  }
-};
+import { RouterPath } from '@/routes/path';
+import { useAuth } from '@/Provider/Auth';
 
 export const Header = () => {
   const mailContext = useMail();
@@ -32,19 +26,28 @@ export const Header = () => {
     window.location.reload();
   };
 
+  const { authInfo } = useAuth();
+
   return (
     <Wrapper>
       <Container>
-        <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>Login</div>
-        <LogoLink to={'/'}>
+        <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
+          {authInfo ? (
+            <Link to={RouterPath.mypage}>
+              <AuthWrapper>My Page</AuthWrapper>
+            </Link>
+          ) : (
+            <Link to={RouterPath.login}>
+              <AuthWrapper>Login</AuthWrapper>
+            </Link>
+          )}
+        </div>
+
+        <LogoLink to={RouterPath.home}>
           <Logo src="/images/logo.svg" />
         </LogoLink>
         <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
-          <div style={{ display: 'flex', flexDirection: 'row', marginLeft: '47px' }}>
-            <MidWrapper onClick={() => scrollToSection('section2')}> 서비스 체험</MidWrapper>
-            <MidWrapper onClick={() => scrollToSection('section3')}> 기능 살펴보기</MidWrapper>
-          </div>
-          <Link to={'/mail'} style={{ display: 'flex', alignItems: 'center' }}>
+          <Link to={RouterPath.mail} style={{ display: 'flex', alignItems: 'center' }}>
             <AiButton onClick={handleMailInput}>AI 메일 생성하기</AiButton>
           </Link>
         </div>
@@ -120,12 +123,8 @@ const AiButton = styled(Button)`
   }
 `;
 
-const MidWrapper = styled.div`
+const AuthWrapper = styled.div`
   cursor: pointer;
-  margin: 0px 20px;
-  @media (max-width: ${breakpoints.md}) {
-    display: none;
-  }
 `;
 
 const LogoLink = styled(Link)`

src/components/Layout/MainHeader.tsx → src/components/Layout/Header/MainHeader.tsx

@@ -3,6 +3,8 @@ import { Link } from 'react-router-dom';
 import { Button } from '@chakra-ui/react';
 import { breakpoints } from '@/styles/variants';
 import { useMail } from '@/Provider/MailContext';
+import { RouterPath } from '@/routes/path';
+import { useAuth } from '@/Provider/Auth';
 
 const scrollToSection = (sectionId: string) => {
   const element = document.getElementById(sectionId);
@@ -31,19 +33,32 @@ export const MainHeader = () => {
     });
   };
 
+  const { authInfo } = useAuth();
+
   return (
     <Wrapper>
       <Container>
-        <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>Login</div>
-        <LogoLink to={'/'}>
+        <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
+          {authInfo ? (
+            <Link to={RouterPath.mypage}>
+              <AuthWrapper>My Page</AuthWrapper>
+            </Link>
+          ) : (
+            <Link to={RouterPath.login}>
+              <AuthWrapper>Login</AuthWrapper>
+            </Link>
+          )}
+        </div>
+
+        <LogoLink to={RouterPath.home}>
           <Logo src="/images/logo.svg" />
         </LogoLink>
         <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
           <div style={{ display: 'flex', flexDirection: 'row', marginLeft: '47px' }}>
             <MidWrapper onClick={() => scrollToSection('section2')}> 서비스 체험</MidWrapper>
             <MidWrapper onClick={() => scrollToSection('section3')}> 기능 살펴보기</MidWrapper>
           </div>
-          <Link to={'/mail'} style={{ display: 'flex', alignItems: 'center' }}>
+          <Link to={RouterPath.mail} style={{ display: 'flex', alignItems: 'center' }}>
             <AiButton onClick={handleMailInput}>AI 메일 생성하기</AiButton>
           </Link>
         </div>
@@ -129,3 +144,7 @@ const LogoLink = styled(Link)`
     margin-left: 100px;
   }
 `;
+
+const AuthWrapper = styled.div`
+  cursor: pointer;
+`;

src/components/Layout/index.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import { Outlet } from 'react-router-dom';
 import { Footer } from './Footer';
-import { HEADER_HEIGHT, MainHeader } from './MainHeader';
+import { HEADER_HEIGHT, MainHeader } from './Header/MainHeader';
 import { UpperImage } from './UpperImage';
 
 export const Layout = () => {

src/components/Layout/noFooterIndex.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import { Outlet } from 'react-router-dom';
-import { Header, HEADER_HEIGHT } from './Header';
+import { Header, HEADER_HEIGHT } from './Header/HeaderWithout';
 
 export const NoFooterLayout = () => {
   return (

src/components/Mail/Header.tsx

@@ -79,6 +79,6 @@ const Bar = styled.div`
   position: absolute;
   bottom: 8px;
   @media (max-width: ${breakpoints.md}) {
-    width: 400px;
+    visibility: hidden;
   }
 `;