Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[#99] 로그인 페이지 구현 #102

Merged
merged 9 commits into from
Nov 23, 2023
Merged

[#99] 로그인 페이지 구현 #102

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
841d8fd
chore: 라우팅 추가
mahwin Nov 23, 2023
e0e5f6d
fix: build 시 발생하는 type 에러 수정
mahwin Nov 23, 2023
1329b3c
chore: HTML 문서 수정
mahwin Nov 23, 2023
d345c25
feat: 로그인 페이지 구현
mahwin Nov 23, 2023
44bdcdc
chore: 필요없는 vite config 삭제
mahwin Nov 23, 2023
b914050
fix: type 추가
mahwin Nov 23, 2023
25d513e
refactor: 불필요한 코드 삭제, 네이밍 변경
mahwin Nov 23, 2023
25d41f6
refactore: login 컴포넌트 로직 분리
mahwin Nov 23, 2023
b5a3e3c
Merge branch 'fe-dev' into 99-로그인-페이지-구현
mahwin Nov 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions frontend/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
40 changes: 40 additions & 0 deletions frontend/src/components/Login/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import { css } from '@style/css';

const GITHUB_AUTH_URL = 'http://101.101.208.240:3000/auths/github';
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

분리한 것 좋네요.


export default function Login() {
const handleLogin = () => {
try {
window.location.href = GITHUB_AUTH_URL;
} catch (e) {
const error = e as Error;
console.error(error.message);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

개발자에게 알려주기 위해서는 이렇게 console.error
사용자에게는 ?

}
};

return (
<section className={loginWrapperStyle}>
<header className={loginHeaderStyle}>Algo With Me</header>
<button onClick={handleLogin}>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',
});
25 changes: 17 additions & 8 deletions frontend/src/components/Problem/Markdown.tsx
View file
Open in desktop
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

감사합니다!

Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
1 change: 1 addition & 0 deletions frontend/src/components/submissionResult/ResultList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
39 changes: 22 additions & 17 deletions frontend/src/router.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,31 @@
import { createBrowserRouter } from 'react-router-dom';

import Login from '@/components/Login';
import ContestPage from '@/pages/ContestPage';
import ProblemPage from '@/pages/ProblemPage';

import App from './App';

const router = createBrowserRouter([
{
path: '/',
element: <App />,
children: [
{
index: true,
path: '/contest/:id',
element: <ContestPage />,
},
{
path: '/problem/:id',
element: <ProblemPage />,
},
],
},
]);
const router = createBrowserRouter(
[
{
path: '/',
element: <App />,
children: [
{
index: true,
path: '/contest/:id',
element: <ContestPage />,
},
{
path: '/problem/:id',
element: <ProblemPage />,
},
{ path: '/login', element: <Login /> },
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LoginPage로 분리하지 않는 이유가 있나요?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

저도 일관성을 위해서 Login 컴포넌트를 pages/LoginPage로 만드는 게 좋다고 생각해서 전 pr에는 그렇게 했었는데, 다른 분들은 불편하신 거 같아서 바꿨는데 그대로 진행해도될까요. 저는 라우터에는 page가 붙는 컴포넌트가 있어야 한다고 생각합니다.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

또 다르게 생각하면 컴포넌트를 page로 import하고 그대로 export하는게 더 불편하단 생각도 드는데 어떻게 생각하시나요? 제가 질문에 제대로 이해한 게 맞을까요

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

제 생각엔 LoginPage를 별도의 페이지로 분리하시려고 했고 그렇다면 pages/LoginPage를 두고 그 안에 Login과 관련된 로직을 둘줄 알았는데 Login컴포넌트를 그냥 넣어서 물어봤습니다.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LoginPage만들어서 Login 로직 분리했습니다!

],
},
],
{ basename: process.env.NODE_ENV === 'production' ? '/web12-algo-with-me' : '' },
);

export default router;
5 changes: 1 addition & 4 deletions frontend/vite.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
{
Expand Down