리액트 - Material UI로 깃허브 로그인 프로필 만들기

깃허브 데스크탑으로 프로젝트 관리하기 강의 오픈!! (인프런 바로가기)

 

리액트 전체 링크

 

참고

- 깃허브 OAuth Access 토큰 발급 받기

- Toast UI 에디터로 깃허브 마크다운 저장하기

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

 

이제 로그인 프로필과 버튼이 나타난다.

 

다음 글에서 로그인 버튼을 누르면 깃허브 계정 정보를 받아오자.