계정 생성 페이지구현

마지막으로 계정 생성코드를 작성해 보겠습니다.!

지금까지 TodoList를 작성하고, 

로그인을 하고 

로그아웃을 했지만

계정생성페이지를 만들지않아 계속

postman 을 통해서 계정을 만들어주었습니다.ㅠㅠ

계정생성이 불가능했으면 로그인 기능은 화중지병입니다.

따라서 이제 로그인, 유저에 대한 기능을 위한 계정 생성페이지를 구현해보겠습니다!!

로그인 하는 버튼 하단의 링크를 클릭해서 계정 생성 페이지로 라우팅 한 후 계정 생성

완료 시 로그인 페이지로 돌아가는 간단한 로직을 구현해 보겠습니다

계정생성 로직

ApiService에 signup 메서드를 추가해주고, 이 메서드를 이용해 백엔드의 signup 요청을

해주도록 하겠습니다.

export function signup(userDTO){
  return call("/auth/signup","POST",userDTO);
}

요청을 보내는 메서드를 작성했습니다.

이제 계정생성을 하는 화면인 signup.js 를 추가하고 계정생성 페이지를 구현해봅니다.

import React from "react";
import {
  Button,
  TextField,
  Link,
  Grid,
  Container,
  Typography,
} from "@material-ui/core";
import { signup } from "../service/ApiService";

class SignUp extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    event.preventDefault();
    // 오브젝트에서 form에 저장된 데이터를 맵의 형태로 바꿔줌.
    const data = new FormData(event.target);
    const username = data.get("username");
    const email = data.get("email");
    const password = data.get("password");
    signup({ email: email, username: username, password: password,auth:"101"  }).then(
      (response) => {
        // 계정 생성 성공 시 login페이지로 리디렉트
        window.location.href = "/login";
      }
    );
  }

  render() {
    return (
      <Container component="main" maxWidth="xs" style={{ marginTop: "8%" }}>
        <form noValidate onSubmit={this.handleSubmit}>
          <Grid container spacing={2}>
            <Grid item xs={12}>
              <Typography component="h1" variant="h5">
                계정 생성
              </Typography>
            </Grid>
            <Grid item xs={12}>
              <TextField
                autoComplete="fname"
                name="username"
                variant="outlined"
                required
                fullWidth
                id="username"
                label="유저 이름"
                autoFocus
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                variant="outlined"
                required
                fullWidth
                id="email"
                label="이메일 주소"
                name="email"
                autoComplete="email"
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                variant="outlined"
                required
                fullWidth
                name="password"
                label="패스워드"
                type="password"
                id="password"
                autoComplete="current-password"
              />
            </Grid>
            <Grid item xs={12}>
              <Button
                type="submit"
                fullWidth
                variant="contained"
                color="primary"
              >
                계정 생성
              </Button>
            </Grid>
          </Grid>
          <Grid container justify="flex-end">
            <Grid item>
              <Link href="/login" variant="body2">
                이미 계정이 있습니까? 로그인 하세요.
              </Link>
            </Grid>
          </Grid>
        </form>
      </Container>
    );
  }
}

export default SignUp;

계정 생성 페이지는 크게 세부분으로 구성했습니다.

첫번쨰는 폼부분입니다.

이 부분에는 인풋 필드가 들어가고, 사용자는 각 인풋 필드에 해당 값을 입력합니다.

두번째는 버튼입니다.

사용자가 계정정보를 입력한 후 버튼을 클릭하면 버튼에 연결된 서브밋핸들 함수가 실행됩니다.

이 함수는 ev.target(=form)에서 데이터를 가져와 요청 바디를 작성한 후 

ApiService의 signup함수를 이용해 계정 생성 요청을 합니다.

세번째는 이미 계정이 있습니까? 로그인 하세요 로 돌아갈수 있는 링크를 만들었습니다.

이 링크를 통해 로그인 페이지로 다시 돌아갈 수 있습니다.

<Link> 컴포넌트의 href="/login에 들어가는 값은 AppRouter에서 지정한 경로와 같아야 한다는 

사실에 유의합시다.

그리고 큰 것은아니지만 회원가입할때 권한auth쪽에 101로 하드코딩으로 권한을 주었습니다.

페이지 권한을  Lob코드 처럼 사용하기 위해서입니다.

혼자 계획한것으로는

100 번 대	이용자
200 번 대	비즈니스
300 번 대	개발자

이렇게 나눌것이며, 100번대에서도 조금씩 유형이 달라진다면 101, 102, 이렇게 세분화할 수 있도록 했습니다.

그러나 일반 가입은 일반이용자, 즉 엔드유저들을 위한 기능이여서 자동으로 101을 부여받게됩니다.

다른 권한은 직접 개발자나 비즈니스군에서 아이디를 생성시키거나 일반유저를 바꿀수 있는 권한이 주어집니다.

SignUp.js 의 구현을 마친 후 AppRouter에서 SignUp 페이지로 가는 라우트를 추가해주어야 합니다.

import React from "react";
import "../../css/index.css";
import Login from "./Login";
import App from "../todo/App.js";
import SignUp from "./signup";
import { BrowserRouter as Router, Switch, Route} from "react-router-dom";
import Box from "@material-ui/core/Box";
import Typography from "@material-ui/core/Typography";

function Copyright(){
    return(
        <Typography variant="body2" color = "textSecondary" align="center">
            {"Copuright @"}
            unoKim, {new Date().getFullYear()}
        </Typography>
    );

}
class AppRouter extends React.Component {
    render() {
      return (
        <div>
          <Router>
            <div>
              <Switch>
                <Route path="/login">
                  <Login />
                </Route>
                <Route path="/signup">
                  <SignUp />
                </Route>
                <Route path="/">
                  <App />
                </Route>
              </Switch>
            </div>
            <Box mt={5}>
              <Copyright />
            </Box>
          </Router>
        </div>
      );
    }
  }
  
  export default AppRouter;

이렇게 라우트를 추가했다면 로그인 화면에서 계정 생성 페이지로 넘어가는 부분을 수정해 주면 끝납니다.

코드를 참고해서 계정 생성 페이지로 넘어가는 링크를 작성해주자. 

또 <Link>의 href="/signup"에 들어가는 값은 AppRouter 에서 지정한 경로와 같아야 합니다.

import React from "react";
import { signin } from "../service/ApiService";
import {
  Link,
  Button,
  TextField,
  Grid,
  Container,
  Typography,
} from "@material-ui/core";

class Login extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    event.preventDefault();
    const data = new FormData(event.target);
    const email = data.get("email");
    const password = data.get("password");
    // ApiService의 signin 메서드를 사용 해 로그인.
    signin({ email: email, password: password });
  }

  render() {
    return (
      <Container component="main" maxWidth="xs" style={{ marginTop: "8%" }}>
        <Grid container spacing={2}>
          <Grid item xs={12}>
            <Typography component="h1" variant="h5">
              로그인
            </Typography>
          </Grid>
        </Grid>
        <form noValidate onSubmit={this.handleSubmit}>
          {" "}
          {/* submit 버튼을 누르면 handleSubmit이 실행됨. */}
          <Grid container spacing={2}>
            <Grid item xs={12}>
              <TextField
                variant="outlined"
                required
                fullWidth
                id="email"
                label="이메일 주소"
                name="email"
                autoComplete="email"
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                variant="outlined"
                required
                fullWidth
                name="password"
                label="패스워드"
                type="password"
                id="password"
                autoComplete="current-password"
              />
            </Grid>
            <Grid item xs={12}>
              <Button
                type="submit"
                fullWidth
                variant="contained"
                color="primary"
              >
                로그인
              </Button>
            </Grid>
            <Link href="/signup" variant="body2">
              <Grid item>계정이 없습니까? 여기서 가입 하세요.</Grid>
            </Link>
          </Grid>
        </form>
      </Container>
    );
  }
}

export default Login;

코드를 작성했습니다.

테스팅

코드를 작성하고 테스트를 해보겠습니다!!

 

 

링크를 클릭해서 계정 생성 페이지로 제대로 라우팅 되는지 보겠습니다.

이미 계정이 있습니까? 로그인하세요를 통해 다시 돌아갈수 있는지 확인합니다!!

그리구 계정생성도 해보도록 해보겠습니다!!

해당 화면에서 해당 정보로 가입했으며, 로그인 성공을 하였습니다.

로그인과 Todo 기능을 하는 기능을 구현했습니다. 

앞으로도 계속 개발이 되는대로 포스팅을 올리겠습니다!!