반응형
깃허브 데스크탑으로 프로젝트 관리하기 강의 오픈!! (인프런 바로가기)
참고
- https://mui.com/material-ui/react-avatar/
- GitHub OAuth Project Settings
- Material UI로 깃허브 로그인 프로필 만들기
- 깃허브 OAuth 콜백 처리하기
- 인증 토큰 획득 서버 구현하기
- 인증 토큰으로 로그인 상태 관리하기
- 로그인 정보를 활용하여 Commit Message 남기기
- 새 창으로 로그인해서 현재 상태 유지하기
Material UI의 Avatar를 이용하면 간단히 로그인 프로필을 만들 수 있다.
./page/GitHubLoginButton.js를 아래와 같이 만들자.
import React from "react";
import Button from "@mui/material/Button";
import Box from "@mui/material/Box";
import Stack from "@mui/material/Stack";
import Avatar from "@mui/material/Avatar";
const GitHubLoginButton = () => {
return (
<div>
<Box sx={{ m: 2 }}>
<Stack direction="row" spacing={2}>
<Avatar alt="GitHub Login" src="/static/images/avatar/1.jpg" />
<Button
variant="outlined"
color="secondary"
>
로그인
</Button>
</Stack>
</Box>
</div>
);
};
export default GitHubLoginButton;
App.js에서 적절한 위치에 버튼을 추가한다.
import React from "react";
import { Route, Link, Routes } from "react-router-dom";
import Home from "./page/Home";
import SimpleToastEditor from "./page/SimpleToastEditor";
import './App.css';
import GitHubLoginButton from "./page/GitHubLoginButton";
const App = () => {
return (
<div>
<div className="router">
<GitHubLoginButton/>
<span>
<Link to="/">Home</Link>
</span>
<span>
<Link to="/editor">Toast UI Editor</Link>
</span>
</div>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/editor" element={<SimpleToastEditor />} />
</Routes>
</div>
);
};
export default App;
이제 로그인 프로필과 버튼이 나타난다.
다음 글에서 로그인 버튼을 누르면 깃허브 계정 정보를 받아오자.
반응형
'개발 > React' 카테고리의 다른 글
리액트, Node JS - 인증 토큰 획득 서버 구현하기 (GitHub Access Token Server with Node JS) (0) | 2023.08.19 |
---|---|
리액트 - 깃허브 OAuth 콜백 처리하기 (GitHub OAuth Callback) (0) | 2023.08.19 |
리액트 - Toast UI Editor with OAuth to Access GitHub (0) | 2023.08.19 |
리액트 - .env 환경 변수 파일 관리하기 (0) | 2023.08.15 |
리액트 - Toast UI 에디터로 깃허브 마크다운 저장하기 (Toast UI Editor with GitHub RESTful API) (0) | 2023.07.30 |
댓글