@@ -19,21 +19,9 @@ const Form = styled.form`
19
19
align-items: center;
20
20
` ;
21
21
22
- const Label = styled . label `
23
- display: block;
24
- margin-bottom: 10px;
25
- font-family: 'Pretendard', sans-serif;
26
- white-space: pre-wrap;
27
- word-break: break-word;
28
- text-align: left;
29
- ` ;
30
-
31
- const InputContainer = styled . div `
32
- padding: 0 16px 0 16px;
33
- ` ;
34
22
35
23
const Input = styled . input `
36
- width: 100 %;
24
+ width: 80 %;
37
25
padding: 10px 0;
38
26
margin-bottom: 10px;
39
27
border: none;
@@ -49,16 +37,33 @@ const Input = styled.input`
49
37
}
50
38
` ;
51
39
40
+ const Label = styled . label `
41
+ width: 80%; // Match the Input width
42
+ display: block;
43
+ margin-bottom: 10px;
44
+ font-family: 'Pretendard', sans-serif;
45
+ white-space: pre-wrap;
46
+ word-break: break-word;
47
+ text-align: left;
48
+ padding-bottom: 48px;
49
+ margin-left: auto; // Center alignment
50
+ margin-right: auto; // Center alignment
51
+ ` ;
52
+
52
53
const Message = styled . p `
53
- margin-top: 10px;
54
+ width: 80%; // Match the Input width
55
+ margin-bottom: 106px;
54
56
font-family: 'Pretendard', sans-serif;
55
57
font-weight: 400;
56
58
font-size: 14px;
57
59
display: block;
58
60
text-align: left;
59
61
margin-top: 16px;
62
+ margin-left: auto; // Center alignment
63
+ margin-right: auto; // Center alignment
60
64
` ;
61
65
66
+
62
67
const Button = styled . button `
63
68
background-color: #864AE1;
64
69
width: 80%;
@@ -69,7 +74,6 @@ const Button = styled.button`
69
74
font-size: 14px;
70
75
border: none;
71
76
border-radius: 16px;
72
- margin: 4vh auto;
73
77
cursor: pointer;
74
78
display: flex;
75
79
align-items: center;
@@ -103,10 +107,10 @@ const Register = () => {
103
107
104
108
const handleSubmit = async ( e ) => {
105
109
e . preventDefault ( ) ;
106
-
110
+
107
111
try {
108
112
const response = await login ( nickname , password ) ;
109
-
113
+
110
114
if ( response . success ) {
111
115
localStorage . setItem ( 'token' , response . data . access_token ) ;
112
116
localStorage . setItem ( 'nickname' , nickname ) ;
@@ -128,26 +132,24 @@ const Register = () => {
128
132
return (
129
133
< Container >
130
134
< Form onSubmit = { handleSubmit } >
131
- < InputContainer >
132
- < Label > 회원이신가요?{ '\n' } 닉네임과 비밀번호를 입력해주세요</ Label >
133
- < Input
134
- id = "nickname"
135
- type = "text"
136
- placeholder = "닉네임을 입력해주세요"
137
- value = { nickname }
138
- onChange = { handleNicknameChange }
139
- required
140
- />
141
- < Input
142
- id = "password"
143
- type = "password"
144
- placeholder = "비밀번호를 입력해주세요"
145
- value = { password }
146
- onChange = { handlePasswordChange }
147
- required
148
- />
149
- < Message > 회원이 아니시라면 자동으로 회원가입을 진행합니다</ Message >
150
- </ InputContainer >
135
+ < Label > 회원이신가요?{ '\n' } 닉네임과 비밀번호를 입력해주세요</ Label >
136
+ < Input
137
+ id = "nickname"
138
+ type = "text"
139
+ placeholder = "닉네임을 입력해주세요"
140
+ value = { nickname }
141
+ onChange = { handleNicknameChange }
142
+ required
143
+ />
144
+ < Input
145
+ id = "password"
146
+ type = "password"
147
+ placeholder = "비밀번호를 입력해주세요"
148
+ value = { password }
149
+ onChange = { handlePasswordChange }
150
+ required
151
+ />
152
+ < Message > 회원이 아니시라면 자동으로 회원가입을 진행합니다</ Message >
151
153
< Button type = "submit" disabled = { ! isFormValid } > 로그인하기</ Button >
152
154
</ Form >
153
155
</ Container >
0 commit comments