Skip to content

Commit aeedd6f

Browse files
authored
Merge pull request #6 from SPARCS-Service-Hackathon-2024/feature/chat
Style: 로그인 UI
2 parents 5c12eba + 58b5aa9 commit aeedd6f

File tree

3 files changed

+66
-37
lines changed

3 files changed

+66
-37
lines changed

src/components/Calendar.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ const CalendarImage = styled.img`
2121
const Label = styled.label`
2222
font-family: 'Pretendard', sans-serif;
2323
font-weight: 500;
24+
margin-bottom: 12;
2425
`;
2526

2627
const CalendarLabelContainer = styled.div`

src/pages/DetailPage.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { useEffect, useState } from 'react';
2+
import { useNavigate } from 'react-router-dom';
23
import { useParams } from 'react-router-dom';
34
import { detail } from '../services/detail';
45
import map from '../assets/map-pin.svg';
@@ -13,6 +14,23 @@ const Container = styled.div`
1314
padding: 0 16px;
1415
`;
1516

17+
const Button = styled.div`
18+
background-color: #864AE1;
19+
width: 80%;
20+
height: 45px;
21+
color: #fff;
22+
font-family: 'Pretendard', sans-serif;
23+
font-weight: 600;
24+
font-size: 14px;
25+
border: none;
26+
border-radius: 16px;
27+
margin: 4vh auto;
28+
cursor: pointer;
29+
display: flex;
30+
align-items: center;
31+
justify-content: center;
32+
`;
33+
1634
const AptImage = styled.img`
1735
width: 100%;
1836
height: 295px;
@@ -94,6 +112,8 @@ const TableData = styled.div`
94112
`;
95113

96114
function DetailPage() {
115+
const navigator = useNavigate();
116+
97117
const { house_id } = useParams();
98118
const [houseDetail, setHouseDetail] = useState(null);
99119

@@ -122,6 +142,10 @@ function DetailPage() {
122142
</TableRow>
123143
);
124144

145+
const handleRegisterClick = () => {
146+
navigator('/registerHome');
147+
};
148+
125149
return (
126150
<>
127151
<AptImage src={houseDetail.image_url} alt="아파트 이미지" />
@@ -147,6 +171,8 @@ function DetailPage() {
147171
{renderRow('학교 종류', `${houseDetail.organizationType}`)}
148172
{renderRow('학교까지 걸어서', `${houseDetail.walkTime}분`)}
149173
</Table>
174+
175+
<Button onClick={handleRegisterClick}>한달 살기 신청하기</Button>
150176
</Container>
151177
</>
152178
);

src/pages/Register.js

Lines changed: 39 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -19,21 +19,9 @@ const Form = styled.form`
1919
align-items: center;
2020
`;
2121

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-
`;
3422

3523
const Input = styled.input`
36-
width: 100%;
24+
width: 80%;
3725
padding: 10px 0;
3826
margin-bottom: 10px;
3927
border: none;
@@ -49,16 +37,33 @@ const Input = styled.input`
4937
}
5038
`;
5139

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+
5253
const Message = styled.p`
53-
margin-top: 10px;
54+
width: 80%; // Match the Input width
55+
margin-bottom: 106px;
5456
font-family: 'Pretendard', sans-serif;
5557
font-weight: 400;
5658
font-size: 14px;
5759
display: block;
5860
text-align: left;
5961
margin-top: 16px;
62+
margin-left: auto; // Center alignment
63+
margin-right: auto; // Center alignment
6064
`;
6165

66+
6267
const Button = styled.button`
6368
background-color: #864AE1;
6469
width: 80%;
@@ -69,7 +74,6 @@ const Button = styled.button`
6974
font-size: 14px;
7075
border: none;
7176
border-radius: 16px;
72-
margin: 4vh auto;
7377
cursor: pointer;
7478
display: flex;
7579
align-items: center;
@@ -103,10 +107,10 @@ const Register = () => {
103107

104108
const handleSubmit = async (e) => {
105109
e.preventDefault();
106-
110+
107111
try {
108112
const response = await login(nickname, password);
109-
113+
110114
if (response.success) {
111115
localStorage.setItem('token', response.data.access_token);
112116
localStorage.setItem('nickname', nickname);
@@ -128,26 +132,24 @@ const Register = () => {
128132
return (
129133
<Container>
130134
<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>
151153
<Button type="submit" disabled={!isFormValid}>로그인하기</Button>
152154
</Form>
153155
</Container>

0 commit comments

Comments
 (0)