[#68] 공통 헤더 만들기

frontend/src/components/Auth/AuthContext.ts

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+
+const AuthContext = createContext({
+  isLoggedin: false,
+  login: () => {},
+  logout: () => {},
+});
+
+export default AuthContext;

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;

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} />;
+}

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',
+});

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 };
+}

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>,
 );

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>
+    </>
   );
 }
 

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;