Merge branch 'fe-dev' of https://github.com/boostcampwm2023/web12-alg…

…o-with-me into 20-유저가-작성한-코드-결과-서버로-보내기
boostcampwm2023 · Nov 23, 2023 · e861bd0 · e861bd0
2 parents 4900e23 + 8069ad2
commit e861bd0
Show file tree

Hide file tree

Showing 14 changed files with 263 additions and 44 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -1,10 +1,10 @@
-<!doctype html>
-<html lang="en">
+<!DOCTYPE html>
+<html lang="ko">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Algo With Me</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/frontend/public/algo.png b/frontend/public/algo.png
diff --git a/frontend/src/components/Auth/AuthContext.ts b/frontend/src/components/Auth/AuthContext.ts
@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+
+const AuthContext = createContext({
+  isLoggedin: false,
+  login: () => {},
+  logout: () => {},
+});
+
+export default AuthContext;
diff --git a/frontend/src/components/Auth/AuthProvider.tsx b/frontend/src/components/Auth/AuthProvider.tsx
@@ -0,0 +1,20 @@
+import { useState } from 'react';
+
+import AuthContext from './AuthContext';
+
+const AuthProvider = ({ children }: { children: React.ReactNode }) => {
+  function logout() {
+    setIsLogined(false);
+  }
+  function login() {
+    setIsLogined(true);
+  }
+
+  const [isLoggedin, setIsLogined] = useState<boolean>(false);
+
+  return (
+    <AuthContext.Provider value={{ isLoggedin, logout, login }}>{children}</AuthContext.Provider>
+  );
+};
+
+export default AuthProvider;
diff --git a/frontend/src/components/Common/Logo.tsx b/frontend/src/components/Common/Logo.tsx
@@ -0,0 +1,8 @@
+interface Props {
+  size: string;
+}
+
+export default function Logo({ size }: Props) {
+  // public이란 곳에 리소스 넣어두면 build시에 바로 밑에 생기기 때문에 ./으로 접근 가능합니다.
+  return <img src="./algo.png" alt="logo" width={size} height={size} />;
+}
diff --git a/frontend/src/components/Header/index.tsx b/frontend/src/components/Header/index.tsx
@@ -0,0 +1,35 @@
+import { css } from '@style/css';
+
+import Logo from '@/components/Common/Logo';
+import useAuth from '@/hooks/login/useAuth';
+
+export default function Header() {
+  const { changeLoginInfo, changeLogoutInfo, isLoggedin } = useAuth();
+
+  const handleLogin = () => {
+    changeLoginInfo();
+  };
+
+  const handleLogout = () => {
+    changeLogoutInfo();
+  };
+
+  return (
+    <header className={headerStyle}>
+      <Logo size="36px" />
+      {isLoggedin ? (
+        <button onClick={handleLogout}> 로그아웃 </button>
+      ) : (
+        <button onClick={handleLogin}> 로그인 </button>
+      )}
+    </header>
+  );
+}
+
+const headerStyle = css({
+  width: '100%',
+  height: '40px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+});
diff --git a/frontend/src/components/Login/index.tsx b/frontend/src/components/Login/index.tsx
@@ -0,0 +1,33 @@
+import { css } from '@style/css';
+
+interface Props {
+  onClickLogin: () => void;
+}
+
+export default function Login({ onClickLogin }: Props) {
+  return (
+    <section className={loginWrapperStyle}>
+      <header className={loginHeaderStyle}>Algo With Me</header>
+      <button onClick={onClickLogin}>Github으로 로그인</button>
+    </section>
+  );
+}
+
+const loginWrapperStyle = css({
+  border: '1px solid white',
+  borderRadius: '10px',
+  width: '100%',
+  height: '100%',
+  maxWidth: '500px',
+  maxHeight: '200px',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'space-between',
+});
+
+const loginHeaderStyle = css({
+  fontSize: '3rem',
+  fontWeight: 'bold',
+  textAlign: 'center',
+  padding: '1rem',
+});
diff --git a/frontend/src/components/Problem/Markdown.tsx b/frontend/src/components/Problem/Markdown.tsx
@@ -3,41 +3,50 @@ import { css } from '@style/css';
 import { ReactNode } from 'react';
 import ReactMarkdown from 'react-markdown';
 
-import type { Components } from 'hast-util-to-jsx-runtime/lib/components';
 import remarkGfm from 'remark-gfm';
 
+interface Components {
+  table: (props: TableProps) => JSX.Element;
+  th: (props: ThProps) => JSX.Element;
+  td: (props: TdProps) => JSX.Element;
+  code: (props: CodeProps) => JSX.Element;
+  ul: (props: UlProps) => JSX.Element;
+  ol: (props: OlProps) => JSX.Element;
+  li: (props: LiProps) => JSX.Element;
+}
+
 interface Props {
   markdownContent: string;
 }
 
 interface TableProps {
-  children: ReactNode;
+  children?: ReactNode;
 }
 
 interface ThProps {
-  children: ReactNode;
+  children?: ReactNode;
 }
 
 interface TdProps {
-  children: ReactNode;
+  children?: ReactNode;
 }
 
 interface CodeProps {
   inline?: boolean;
   className?: string;
-  children: ReactNode;
+  children?: ReactNode;
 }
 
 interface UlProps {
-  children: ReactNode;
+  children?: ReactNode;
 }
 
 interface OlProps {
-  children: ReactNode;
+  children?: ReactNode;
 }
 
 interface LiProps {
-  children: ReactNode;
+  children?: ReactNode;
 }
 
 export default function Markdown(props: Props) {

diff --git a/frontend/src/hooks/login/useAuth.ts b/frontend/src/hooks/login/useAuth.ts
@@ -0,0 +1,77 @@
+import { useContext, useEffect } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+import AuthContext from '@/components/Auth/AuthContext';
+
+import axios from 'axios';
+
+const TOKEN_KEY = 'accessToken';
+const BASE_URL = import.meta.env.VITE_API_URL;
+const AUTH_TEST_PATH = '/auths/tests';
+
+const URL = `${BASE_URL}${AUTH_TEST_PATH}`;
+
+const fetchTokenValid = async (token: string) => {
+  try {
+    const response = await axios.get(URL, {
+      headers: { Authorization: `Bearer ${token}` },
+    });
+    // {email: '[email protected]', nickname: '[email protected]'}
+    // 저장할 지 말지는 나중에 결정
+    const data = await response.data;
+    console.log(data, '인증 받음.');
+    if (response.status === 200) return true;
+    // 올바른 유저라는 검증을 받음.
+  } catch (e) {
+    console.log('인증 받지 못함.', e);
+    return false;
+  }
+};
+
+export default function useAuth() {
+  const { isLoggedin, login, logout } = useContext(AuthContext);
+
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (isLoggedin) return;
+    const queryParams = new URLSearchParams(location.search);
+    const token = queryParams.get(TOKEN_KEY) || localStorage.getItem(TOKEN_KEY);
+
+    if (!token) return;
+    evaluateToken(token);
+  }, []);
+
+  const evaluateToken = async (token: string) => {
+    const isValid = await fetchTokenValid(token);
+    isValid ? saveAuthInfo(token) : removeAuthInfo();
+  };
+
+  const saveAuthInfo = (token: string) => {
+    localStorage.setItem(TOKEN_KEY, token);
+    login();
+  };
+
+  const removeAuthInfo = () => {
+    // accessToken 없애기
+    // AuthContext 없애기
+    localStorage.removeItem(TOKEN_KEY);
+    logout();
+  };
+
+  const changeLoginInfo = () => {
+    // accessToken 없애기
+    // AuthContext 없애기
+    // 로그인 페이지로 이동
+    removeAuthInfo();
+    navigate('/login');
+  };
+
+  const changeLogoutInfo = () => {
+    // accessToken 없애기
+    // AuthContext 없애기
+    removeAuthInfo();
+  };
+  return { changeLoginInfo, changeLogoutInfo, isLoggedin };
+}
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
@@ -4,10 +4,13 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { RouterProvider } from 'react-router-dom';
 
+import AuthProvider from './components/Auth/AuthProvider';
 import router from './router';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <RouterProvider router={router}></RouterProvider>
+    <AuthProvider>
+      <RouterProvider router={router}></RouterProvider>
+    </AuthProvider>
   </React.StrictMode>,
 );
diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx
@@ -0,0 +1,17 @@
+import Login from '@/components/Login';
+
+const GITHUB_AUTH_URL = 'http://101.101.208.240:3000/auths/github';
+
+export default function LoginPage() {
+  // 넘겨주는 함수는 handle, 함수를 넘길 때의 프로펄티 네임은 on
+  const handleLogin = () => {
+    try {
+      window.location.href = GITHUB_AUTH_URL;
+    } catch (e) {
+      const error = e as Error;
+      console.error(error.message);
+    }
+  };
+
+  return <Login onClickLogin={handleLogin} />;
+}
diff --git a/frontend/src/pages/MainPage.tsx b/frontend/src/pages/MainPage.tsx
@@ -1,17 +1,21 @@
 import { css } from '@style/css';
 
+import Header from '@/components/Header';
 import GoToCreateCompetitionLink from '@/components/Main/Buttons/GoToCreateCompetitionLink';
 import CompetitionList from '@/components/Main/CompetitionList';
 import { SITE } from '@/constants';
 
 function MainPage() {
   return (
-    <main className={style}>
-      <span className={ProjectNameStyle}>{SITE.NAME} </span>
-      <span>{SITE.PAGE_DESCRIPTION} </span>
-      <GoToCreateCompetitionLink />
-      <CompetitionList />
-    </main>
+    <>
+      <Header />
+      <main className={style}>
+        <span className={ProjectNameStyle}>{SITE.NAME} </span>
+        <span>{SITE.PAGE_DESCRIPTION} </span>
+        <GoToCreateCompetitionLink />
+        <CompetitionList />
+      </main>
+    </>
   );
 }
 

diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx
@@ -2,34 +2,41 @@ import { createBrowserRouter } from 'react-router-dom';
 
 import ContestPage from '@/pages/ContestPage';
 import CreateCompetitionPage from '@/pages/CreateCompetitionPage';
+import LoginPage from '@/pages/LoginPage';
 import MainPage from '@/pages/MainPage';
 import ProblemPage from '@/pages/ProblemPage';
 
 import App from './App';
 
-const router = createBrowserRouter([
+const router = createBrowserRouter(
+  [
+    {
+      path: '/',
+      element: <App />,
+      children: [
+        {
+          index: true,
+          element: <MainPage />,
+        },
+        {
+          path: '/contest/:id',
+          element: <ContestPage />,
+        },
+        {
+          path: '/problem/:id',
+          element: <ProblemPage />,
+        },
+        {
+          path: '/contest/create',
+          element: <CreateCompetitionPage />,
+        },
+        { path: '/login', element: <LoginPage /> },
+      ],
+    },
+  ],
   {
-    path: '/',
-    element: <App />,
-    children: [
-      {
-        index: true,
-        element: <MainPage />,
-      },
-      {
-        path: '/contest/:id',
-        element: <ContestPage />,
-      },
-      {
-        path: '/problem/:id',
-        element: <ProblemPage />,
-      },
-      {
-        path: '/contest/create',
-        element: <CreateCompetitionPage />,
-      },
-    ],
+    basename: process.env.NODE_ENV === 'production' ? '/web12-Algo-With-Me' : '',
   },
-]);
+);
 
 export default router;
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
@@ -3,10 +3,7 @@ import path from 'path';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-  server: {
-    open: 'frontend/dist/index.html',
-  },
-  base: '',
+  base: './',
   resolve: {
     alias: [
       {