Skip to content

Commit fe2d111

Browse files
chaesunwoongchaesunwoong
committed
로그인, 회원가입 페이지 작업
1 parent b2efd4b commit fe2d111

3 files changed

Lines changed: 249 additions & 0 deletions

File tree

‎src/components/login/Login.css‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
/* 전체 기본 글꼴 및 폰트 크기 설정 */
2+
body {
3+
font-size: 18px;
4+
font-family: 'Noto Sans KR', sans-serif;
5+
margin: 0;
6+
padding: 0;
7+
box-sizing: border-box;
8+
}
9+
10+
.login-container {
11+
display: flex;
12+
justify-content: center;
13+
align-items: center;
14+
min-height: 100vh;
15+
background-color: #f9f9f9;
16+
padding: 2rem;
17+
}
18+
19+
.login-box {
20+
padding: 3rem;
21+
border-radius: 8px;
22+
width: 100%;
23+
max-width: 480px;
24+
}
25+
26+
.login-title {
27+
font-size: 3rem; /* 확대 */
28+
font-weight: bold;
29+
text-align: center;
30+
margin-bottom: 1rem;
31+
}
32+
33+
.login-subtitle {
34+
text-align: center;
35+
color: #666;
36+
margin-bottom: 2rem;
37+
font-size: 1.3rem; /* 확대 */
38+
}
39+
40+
.login-form {
41+
display: flex;
42+
flex-direction: column;
43+
gap: 1.2rem;
44+
}
45+
46+
.login-form label {
47+
font-size: 1.1rem; /* 추가 */
48+
}
49+
50+
.login-form input[type="text"],
51+
.login-form input[type="password"],
52+
.login-form input[type="email"] {
53+
padding: 0.75rem;
54+
font-size: 1.1rem; /* 확대 */
55+
border: 1px solid #ccc;
56+
border-radius: 4px;
57+
width: 100%;
58+
box-sizing: border-box;
59+
}
60+
61+
/* ✅ 간격 좁히기 위한 수정 */
62+
small {
63+
font-size: 1rem; /* 확대 */
64+
margin-top: 0.2rem; /* 상단 여백 줄이기 */
65+
margin-bottom: 0.2rem; /* 하단 여백 줄이기 */
66+
line-height: 1.4; /* line-height 줄여서 텍스트 간격 좁히기 */
67+
}
68+
69+
.password-container {
70+
display: flex;
71+
justify-content: space-between;
72+
align-items: center;
73+
font-size: 1rem; /* 확대 */
74+
}
75+
76+
.password-container a {
77+
color: #6a1b9a;
78+
text-decoration: none;
79+
}
80+
81+
.remember-me {
82+
display: flex;
83+
align-items: center;
84+
gap: 0.5rem;
85+
font-size: 1rem; /* 확대 */
86+
}
87+
88+
.login-form button {
89+
background-color: #6a1b9a;
90+
color: white;
91+
padding: 0.8rem;
92+
font-size: 1.1rem; /* 확대 */
93+
border: none;
94+
border-radius: 4px;
95+
cursor: pointer;
96+
}
97+
98+
.login-form button:hover {
99+
background-color: #8e24aa;
100+
}
101+
102+
/* ✅ 겹침 문제 해결된 구분선 스타일 */
103+
.divider {
104+
display: flex;
105+
align-items: center;
106+
text-align: center;
107+
font-size: 1rem;
108+
color: #999;
109+
margin: 2rem 0 1.5rem;
110+
width: 100%;
111+
}
112+
113+
.divider::before,
114+
.divider::after {
115+
content: '';
116+
flex: 1;
117+
height: 1px;
118+
background: #ccc;
119+
margin: 0 1rem;
120+
}
121+
122+
.social-buttons {
123+
display: flex;
124+
gap: 1rem;
125+
justify-content: center;
126+
}
127+
128+
.social-buttons button {
129+
flex: 1;
130+
padding: 0.6rem;
131+
font-size: 1.05rem; /* 확대 */
132+
border: 1px solid #ccc;
133+
border-radius: 4px;
134+
background-color: #eee;
135+
cursor: not-allowed;
136+
}
137+
138+
.signup-link {
139+
text-align: center;
140+
font-size: 1.1rem; /* 확대 */
141+
margin-top: 2rem;
142+
}
143+
144+
.signup-link a {
145+
color: #6a1b9a;
146+
text-decoration: none;
147+
}

‎src/components/login/Login.jsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
// src/components/Login.jsx
2+
import React from 'react';
3+
import './Login.css'; // CSS 파일 import
4+
5+
function Login() {
6+
return (
7+
<div className="login-container">
8+
<div className="login-box">
9+
<h1 className="login-title">로그인</h1>
10+
<p className="login-subtitle">계정에 로그인하여 CodeViz를 시작하세요</p>
11+
<form className="login-form">
12+
<label htmlFor="username">아이디</label>
13+
<input
14+
id="username"
15+
type="text"
16+
placeholder="사용자 아이디 입력"
17+
required
18+
/>
19+
<div className="password-container">
20+
<label htmlFor="password">비밀번호</label>
21+
<a href="/forgot-password">비밀번호 찾기</a>
22+
</div>
23+
<input
24+
id="password"
25+
type="password"
26+
placeholder="••••••••"
27+
required
28+
/>
29+
<div className="remember-me">
30+
<input type="checkbox" id="remember" />
31+
<label htmlFor="remember">로그인 상태 유지</label>
32+
</div>
33+
<button type="submit">로그인</button>
34+
</form>
35+
<div className="divider">또는 소셜 계정으로 로그인</div>
36+
<div className="social-buttons">
37+
<button disabled>Google</button>
38+
<button disabled>Github</button>
39+
</div>
40+
<p className="signup-link">
41+
계정이 없으신가요? <a href="/signup">회원가입</a>
42+
</p>
43+
</div>
44+
</div>
45+
);
46+
}
47+
48+
export default Login;

‎src/components/signup/SignUp.jsx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
// src/components/SignUp.jsx
2+
import React from 'react';
3+
import '../login/Login.css'; // 로그인과 같은 스타일 사용
4+
5+
function SignUp() {
6+
return (
7+
<div className="login-container">
8+
<div className="login-box">
9+
<h1 className="login-title">회원가입</h1>
10+
<p className="login-subtitle">CodeViz 계정을 만들고 코드 시각화를 시작하세요</p>
11+
12+
<form className="login-form">
13+
<label htmlFor="username">아이디 *</label>
14+
<input id="username" type="text" placeholder="사용할 아이디 입력" required />
15+
16+
<label htmlFor="email">이메일 *</label>
17+
<input id="email" type="email" placeholder="name@example.com" required />
18+
<small>인증번호를 받을 이메일 주소를 입력해주세요.</small>
19+
20+
<label htmlFor="password">비밀번호 *</label>
21+
<input id="password" type="password" required />
22+
<small>비밀번호는 8자 이상이어야 합니다.</small>
23+
24+
<label htmlFor="confirm-password">비밀번호 확인 *</label>
25+
<input id="confirm-password" type="password" required />
26+
27+
<label htmlFor="name">이름 *</label>
28+
<input id="name" type="text" placeholder="홍길동" required />
29+
30+
<div className="remember-me">
31+
<input type="checkbox" id="terms" required />
32+
<label htmlFor="terms"><strong>이용약관에 동의합니다.</strong><br />이용약관을 읽고 동의합니다.</label>
33+
</div>
34+
35+
<div className="remember-me">
36+
<input type="checkbox" id="privacy" required />
37+
<label htmlFor="privacy"><strong>개인정보 처리방침에 동의합니다.</strong><br />개인정보 처리방침을 확인 후 동의합니다.</label>
38+
</div>
39+
40+
<button type="submit">회원가입 완료</button>
41+
</form>
42+
43+
<div className="divider">또는 소셜 계정으로 가입</div>
44+
45+
<div className="social-buttons">
46+
<button disabled>Google</button>
47+
<button disabled>Github</button>
48+
</div>
49+
</div>
50+
</div>
51+
);
52+
}
53+
54+
export default SignUp;

0 commit comments

Comments
 (0)