Merge pull request #102 from boostcampwm2023/99-로그인-페이지-구현

[#99] 로그인 페이지 구현
boostcampwm2023 · Nov 23, 2023 · d7d7788 · d7d7788
2 parents 7ed363f + b5a3e3c
commit d7d7788
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 15 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/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/components/submissionResult/ResultList.tsx b/frontend/src/components/submissionResult/ResultList.tsx
@@ -3,6 +3,7 @@ import { css } from '@style/css';
 import { useCallback, useEffect, useState } from 'react';
 
 import ResultInfoWrapper from './ResultInfoWrapper';
+import type { SubmitResult } from './types';
 
 interface TestcaseLoadInfo {
   [index: string]: boolean;

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/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: [
       {