안형욱

style: login form 스타일 추가

1 +import React from 'react';
2 +import styled from 'styled-components';
3 +import palette from '../lib/styles/palette';
4 +import Button from './common/Button';
5 +
6 +const FormBlock = styled.form`
7 + position: absolute;
8 + top: 50%;
9 + left: 50%;
10 + transform: translate(-50%, -50%);
11 + width: 25rem;
12 + padding: 2.5rem;
13 + box-sizing: border-box;
14 + border: 1px solid #dadce0;
15 + -webkit-border-radius: 8px;
16 + border-radius: 8px;
17 + text-align: center;
18 +`;
19 +
20 +const InputBox = styled.div`
21 + position: relative;
22 + input {
23 + width: 93%;
24 + padding: 0.625rem 10px;
25 + font-size: 1rem;
26 + letter-spacing: 0.062rem;
27 + margin-bottom: 1.875rem;
28 + border: 1px solid #ccc;
29 + background: transparent;
30 + border-radius: 4px;
31 + }
32 + .label {
33 + position: absolute;
34 + top: 0;
35 + left: 10px;
36 + padding: 0.625rem 0;
37 + font-size: 1rem;
38 + color: grey;
39 + pointer-events: none;
40 + transition: 0.5s;
41 + }
42 +
43 + input:focus ~ .label,
44 + input:valid ~ .label,
45 + input:not([value='']) ~ .label {
46 + top: -1.125rem;
47 + left: 10px;
48 + color: ${palette.blue6};
49 + font-size: 0.75rem;
50 + background-color: #fff;
51 + height: 10px;
52 + padding-left: 5px;
53 + padding-right: 5px;
54 + }
55 +
56 + input:focus {
57 + outline: none;
58 + border: 2px solid ${palette.blue6};
59 + }
60 + input[type='submit'] {
61 + border: none;
62 + outline: none;
63 + color: #fff;
64 + background-color: ${palette.blue6};
65 + padding: 0.625rem 1.25rem;
66 + cursor: pointer;
67 + border-radius: 0.312rem;
68 + font-size: 1rem;
69 + float: right;
70 + }
71 +
72 + input[type='submit']:hover {
73 + background-color: ${palette.blue6};
74 + box-shadow: 0 1px 1px 0 rgba(66, 133, 244, 0.45),
75 + 0 1px 3px 1px rgba(66, 133, 244, 0.3);
76 + }
77 +`;
78 +
79 +const ButtonBlock = styled.div`
80 + display: flex;
81 + justify-content: space-between;
82 + padding: 1rem;
83 +`;
84 +
85 +const Login = () => {
86 + return (
87 + <FormBlock>
88 + <div>Logo</div>
89 + <h1>로그인</h1>
90 + <InputBox>
91 + <input type="email" id="email" name="email" value="" />
92 + <div className="label">Email</div>
93 + </InputBox>
94 + <InputBox>
95 + <input type="text" name="text" value="" />
96 + <div className="label">Password</div>
97 + </InputBox>
98 + <ButtonBlock>
99 + <div>홈으로</div>
100 + <Button color="blue">로그인</Button>
101 + </ButtonBlock>
102 + </FormBlock>
103 + );
104 +};
105 +
106 +export default Login;
1 +import React from 'react';
2 +import Login from '../components/Login';
3 +
4 +const LoginPage = () => {
5 + return (
6 + <>
7 + <Login />
8 + </>
9 + );
10 +};
11 +
12 +export default LoginPage;