React + Spring Boot + MySQL (16)

Login 페이지를 만들어보자

다음과 같이 LoginPage와 Login 컴포넌트 파일을 만들어준다.

src/pages/LoginPage/index.tsx

import React from "react";
import Login from "../../components/Login";

export default function LoginPage() {
  return (
    <div>
      <Login />
    </div>
  );
}

src/components/Login/index.tsx

import axios from "axios";
import React, { ChangeEvent, useState } from "react";
import * as _ from "./style";

const Login = () => {
  const [userEmail, setUserEmail] = useState<string>("");
  const [userPassword, setUserPassword] = useState<string>("");

  return (
    <_.LoginContainer>
      <_.LoginForm>
        <_.LoginInput
          type="text"
          name="email"
          placeholder="이메일을 입력해주세요"
          onChange={(e: ChangeEvent<HTMLInputElement>) => {
            setUserEmail(e.target.value);
          }}
        />
        <_.LoginInput
          type="password"
          name="password"
          placeholder="비밀번호를 입력해주세요"
          onChange={(e: ChangeEvent<HTMLInputElement>) => {
            setUserPassword(e.target.value);
          }}
        />
        <_.LoginButton>회원가입</_.LoginButton>
      </_.LoginForm>
    </_.LoginContainer>
  );
};

export default Login;

src/components/Login/style.ts

import styled from "styled-components";

export const LoginContainer = styled.div`
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
`;

export const LoginForm = styled.form`
  width: 500px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 30 0px;
`;

export const LoginInput = styled.input`
  width: 80%;
  height: 40px;
  border: 0.5px solid gray;
  margin-top: 20px;
`;

export const LoginButton = styled.button`
  width: 80px;
  height: 40px;
  border: 0.5px solid gray;
  margin-bottom: 20px;
  background-color: darkblue;
  color: white;
  margin-top: 40px;
`;

src/router/index.tsx

import React from "react";
import MainPage from "../pages/MainPage";
import { Routes as Switch, Route } from "react-router-dom";
import SignUpPage from "../pages/SignUpPage";
import LoginPage from "../pages/LoginPage";

export default function Router() {
  return (
    <div>
      <Switch>
        <Route path="/" element={<MainPage />} />
        <Route path="/signup" element={<SignUpPage />} />
        <Route path="/login" element={<LoginPage />} />
      </Switch>
    </div>
  );
}