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