이승윤

style: LoginForm 스타일 변경-mantine 적용

1 +import React from 'react';
2 +import { TextInput, Button, Container, CONTAINER_SIZES } from '@mantine/core';
3 +import { useForm } from '@mantine/hooks';
4 +import styled from 'styled-components';
5 +import { Link } from 'react-router-dom';
6 +import palette from '../../lib/styles/palette';
7 +
8 +const LoginFormBlock = styled.div`
9 + display: flex;
10 + height: 100%;
11 + align-items: center;
12 +`;
13 +const ButtonBlock = styled.div`
14 + display: flex;
15 + justify-content: space-between;
16 + margin-top: 2rem;
17 +`;
18 +const FormBlock = styled.div``;
19 +const LoginForm = () => {
20 + const { onSubmit, errors, values, setFieldValue } = useForm({
21 + initialValues: {
22 + email: '',
23 + password: '',
24 + termOfService: false,
25 + },
26 + validationRules: {
27 + email: value => /^[^\s@]+@[^\s@]+$/.test(value),
28 + },
29 + });
30 + return (
31 + <LoginFormBlock>
32 + <Container
33 + size={CONTAINER_SIZES.xs}
34 + padding="xs"
35 + style={{
36 + display: 'block',
37 + width: CONTAINER_SIZES.xs,
38 + padding: '5rem',
39 + border: `1px ${palette.gray3} solid`,
40 + borderRadius: '5px',
41 + }}
42 + >
43 + <h2>Logo</h2>
44 + <FormBlock>
45 + <TextInput
46 + required
47 + label="Email"
48 + placeholder="example@example.com"
49 + error={errors.email && 'Please specify valid email'}
50 + value={values.email}
51 + onChange={event =>
52 + setFieldValue('email', event.currentTarget.value)
53 + }
54 + />
55 + <TextInput
56 + required
57 + label="Password"
58 + placeholder="Your password"
59 + value={values.password}
60 + type="password"
61 + style={{ marginTop: '2rem' }}
62 + onChange={event =>
63 + setFieldValue('password', event.currentTarget.value)
64 + }
65 + />
66 + <ButtonBlock>
67 + <Link to="/">
68 + <Button variant="outline">홈으로</Button>
69 + </Link>
70 + <Button type="button" onClick={onSubmit(v => console.log(v))}>
71 + 로그인
72 + </Button>
73 + </ButtonBlock>
74 + </FormBlock>
75 + </Container>
76 + </LoginFormBlock>
77 + );
78 +};
79 +export default LoginForm;