Skip to content

Commit ea0294e

Browse files
ByungyeonKimByungyeonKim
authored
Merge pull request #88 from les0498/Basic-이은서-sprint4
[이은서] sprint4
2 parents e3f5a49 + 6a84d28 commit ea0294e

10 files changed

Lines changed: 669 additions & 285 deletions

File tree

‎common/common.css‎

Lines changed: 45 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ header,
2525
align-items: flex-end;
2626
width: 100%;
2727
height: 540px;
28-
background-color: #CFE5FF;
28+
background-color: #cfe5ff;
2929
margin: 0 auto;
3030
}
3131

@@ -34,14 +34,14 @@ main {
3434
margin-bottom: 120px;
3535
}
3636

37-
3837
footer {
3938
width: 100%;
4039
background-color: #111827;
41-
padding: 32px 0 108px;
40+
padding: 32px 0 108px;
4241
}
4342

44-
.login-btn {
43+
.login-btn,
44+
.signup-btn {
4545
display: inline-flex;
4646
padding: 12px 23px;
4747
background-color: var(--blue);
@@ -56,42 +56,59 @@ footer {
5656
text-decoration: none;
5757
}
5858

59-
60-
6159
.header-btn {
6260
display: inline-flex;
6361
width: 357px;
64-
height: 56px;
62+
height: 56px;
6563
background-color: var(--blue);
6664
border-radius: 40px;
67-
border-style: none;
65+
border-style: none;
6866
text-decoration: none;
6967
color: var(--white);
7068
font-size: 20px;
71-
font-weight: 600;
69+
font-weight: 600;
7270
justify-content: center;
7371
align-items: center;
7472
min-width: 240px;
7573
min-height: 48px;
76-
}
74+
}
7775

78-
.title:hover ,.logo:hover{
76+
.eye {
77+
position: absolute;
78+
width: 24px;
79+
height: 24px;
80+
right: 16px;
81+
top: 50%;
82+
transform: translateY(-50%);
7983
cursor: pointer;
8084
}
8185

82-
.login-btn:hover , .header-btn:hover {
86+
.title:hover,
87+
.logo:hover {
8388
cursor: pointer;
84-
background-color: #1967D6;
8589
}
8690

87-
.login-btn:focus, .header-btn:focus {
88-
background-color: #1251AA;
91+
.login-btn:hover,
92+
.header-btn:hover,
93+
.signup-btn:hover {
94+
cursor: pointer;
95+
background-color: #1967d6;
8996
}
9097

91-
.login-btn:disabled, .header-btn:disabled {
92-
background-color: var(--gray400);
98+
.login-btn:focus,
99+
.header-btn:focus,
100+
.signup-btn:focus {
101+
background-color: #1251aa;
93102
}
94103

104+
.login-btn:disabled,
105+
.header-btn:disabled,
106+
.signup-btn:disabled {
107+
background-color: var(--gray400);
108+
color: var(--white);
109+
cursor: not-allowed;
110+
pointer-events: none;
111+
}
95112

96113
@media (min-width: 768px) and (max-width: 1199px) {
97114
nav {
@@ -107,20 +124,17 @@ footer {
107124
}
108125

109126
main {
110-
margin: 52px 0 82px;
127+
margin: 52px 0 82px;
111128
display: flex;
112129
flex-direction: column;
113-
padding: 0 20px;
114-
}
130+
padding: 0 20px;
131+
}
115132

116-
117-
footer {
133+
footer {
118134
width: 100%;
119135
height: 160px;
120-
padding: 32px 104px 108px 104px;
136+
padding: 32px 104px 108px 104px;
121137
}
122-
123-
124138
}
125139

126140
@media (max-width: 767px) {
@@ -132,22 +146,20 @@ footer {
132146
padding: var(--login-btn-padding);
133147
}
134148

135-
136149
header {
137-
height: 540px;
150+
height: 540px;
138151
}
139152

140153
main {
141-
margin: 52px 0 82px;
154+
margin: 52px 0 82px;
142155
display: flex;
143156
flex-direction: column;
144-
padding: 0 20px;
157+
padding: 0 20px;
145158
}
146-
147-
footer {
159+
160+
footer {
148161
width: 100%;
149162
height: 160px;
150-
padding: 32px 32px 30px 32px;
163+
padding: 32px 32px 30px 32px;
151164
}
152-
153165
}

‎common/variables.css‎

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,27 @@
11
:root {
22
--gray900: #11827;
3-
--gray800: #1F2937;
3+
--gray800: #1f2937;
44
--gray700: #374151;
5-
--gray600: #4B5563;
6-
--gray500: #6B7280;
7-
--gray400: #9CA3AF;
8-
--gray200: #E5E7EB;
9-
--gray100: #F3F4F6;
10-
--blue :#3692FF;
11-
--white: #FFFFFF;
5+
--gray600: #4b5563;
6+
--gray500: #6b7280;
7+
--gray400: #9ca3af;
8+
--gray200: #e5e7eb;
9+
--gray100: #f3f4f6;
10+
--blue: #3692ff;
11+
--red: #f74747;
12+
--white: #ffffff;
1213

13-
--font-size-14 : 0.875rem;
14-
--font-size-16 : 1rem;
15-
--font-size-18 : 1.125rem;
16-
--font-size-20 : 1.25rem;
17-
--font-size-24 : 1.5rem;
18-
--font-size-32 : 2rem;
19-
--font-size-40 : 2.5rem;
14+
--font-size-14: 0.875rem;
15+
--font-size-16: 1rem;
16+
--font-size-18: 1.125rem;
17+
--font-size-20: 1.25rem;
18+
--font-size-24: 1.5rem;
19+
--font-size-32: 2rem;
20+
--font-size-40: 2.5rem;
2021

2122
--clamp-24: clamp(1rem, 2.5vw, 1.5rem);
2223
--clamp-40: clamp(1.8rem, 3.5vw, 2.5rem);
2324

24-
25-
2625
--nav-title: 25.63px;
27-
--login-btn-padding: 11px 43px;
26+
--login-btn-padding: 11px 43px;
2827
}

‎login/index.html‎

Lines changed: 69 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,76 @@
11
<!DOCTYPE html>
22
<html lang="ko">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Login</title>
7-
<link rel="shortcut icon" href="/images/pandaicon.png" type="image/x-icon">
8-
<link rel="stylesheet" href="/common/reset.css">
9-
<link rel="stylesheet" href="/common/variables.css">
10-
<link rel="stylesheet" href="/common/common.css" >
11-
<link rel="stylesheet" href="/login/style.css" >
12-
</head>
13-
<body>
14-
<div class="content">
15-
<div class="title">
16-
<img class="logo" src="/images/pandaicon.png" alt="판다마켓로고">
17-
<a href="/"><h1>판다마켓</h1></a>
18-
</div>
19-
<form>
20-
<div class="email">
21-
<label for="email">이메일</label>
22-
<input class="email-input" name="email" type="email" placeholder="이메일을 입력해 주세요.">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Login</title>
7+
<link
8+
rel="shortcut icon"
9+
href="/images/pandaicon.png"
10+
type="image/x-icon"
11+
/>
12+
<link rel="stylesheet" href="/common/reset.css" />
13+
<link rel="stylesheet" href="/common/variables.css" />
14+
<link rel="stylesheet" href="/common/common.css" />
15+
<link rel="stylesheet" href="/login/style.css" />
16+
</head>
17+
<body>
18+
<div class="content">
19+
<div class="title">
20+
<img class="logo" src="/images/pandaicon.png" alt="판다마켓로고" />
21+
<a href="/"><h1>판다마켓</h1></a>
2322
</div>
24-
<div class="pwd">
25-
<label for="password">비밀번호</label>
26-
<div class="pwd-content">
27-
<input class="pwd-input" name="password" type="password" placeholder="비밀번호를 입력해 주세요." >
28-
<img class="eye" src="/images/btn_visibility_off.png">
23+
<form id="LoginForm">
24+
<div class="email">
25+
<label for="email">이메일</label>
26+
<input
27+
id="email"
28+
class="email-input"
29+
name="email"
30+
type="email"
31+
placeholder="이메일을 입력해 주세요."
32+
/>
33+
<div id="email-error" class="error-message"></div>
34+
</div>
35+
<div class="pwd">
36+
<label for="password">비밀번호</label>
37+
<div class="pwd-content">
38+
<input
39+
id="password"
40+
class="pwd-input"
41+
name="password"
42+
type="password"
43+
placeholder="비밀번호를 입력해 주세요."
44+
/>
45+
<img
46+
class="eye"
47+
id="eyeIcon"
48+
src="/images/btn_visibility_off.png"
49+
/>
50+
</div>
51+
<div id="password-error" class="error-message"></div>
52+
</div>
53+
<button class="login-btn" type="submit" disabled>로그인</button>
54+
</form>
55+
<div class="section">
56+
<div class="simple-login">
57+
<h3>간편 로그인 하기</h3>
58+
</div>
59+
<div class="sns">
60+
<a href="https://www.google.com/"
61+
><img src="/images/google.png" alt="google"
62+
/></a>
63+
<a href="https://www.kakaocorp.com/page/"
64+
><img src="/images/kakao.png" alt="kakao"
65+
/></a>
2966
</div>
3067
</div>
31-
<button class="login-btn" type="submit">로그인</button>
32-
</form>
33-
<div class="section">
34-
<div class="simple-login">
35-
<h3>간편 로그인 하기</h3>
36-
</div>
37-
<div class="sns">
38-
<a href="https://www.google.com/"><img src="/images/google.png" alt="google"></a>
39-
<a href="https://www.kakaocorp.com/page/"><img src="/images/kakao.png" alt="kakao"></a>
40-
</div>
41-
</div>
42-
<div class="sign-up-message">
43-
<div class="message">
44-
판다 마켓이 처음이신가요? <a href="/signup/">회원가입</a>
68+
<div class="sign-up-message">
69+
<div class="message">
70+
판다 마켓이 처음이신가요? <a href="/signup/">회원가입</a>
71+
</div>
4572
</div>
4673
</div>
47-
48-
</div>
49-
</body>
50-
</html>
74+
<script type="module" src="/login/index.js"></script>
75+
</body>
76+
</html>

‎login/index.js‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import {
2+
preventPasswordSpaces,
3+
updateButtonState,
4+
validateEmailInput,
5+
validatePasswordInput,
6+
togglePasswordVisiblity,
7+
} from "../shared/form-utils.js";
8+
9+
const emailInput = document.getElementById("email");
10+
const emailError = document.getElementById("email-error");
11+
12+
const passwordInput = document.getElementById("password");
13+
const passwordError = document.getElementById("password-error");
14+
15+
const loginBtn = document.querySelector(".login-btn");
16+
const loginForm = document.getElementById("LoginForm");
17+
const eyeIcon = document.getElementById("eyeIcon");
18+
19+
function validateEmail() {
20+
return validateEmailInput(emailInput, emailError);
21+
}
22+
23+
function validatePassword() {
24+
return validatePasswordInput(passwordInput, passwordError);
25+
}
26+
27+
function eyeIconClickHandler() {
28+
togglePasswordVisiblity(passwordInput, eyeIcon);
29+
}
30+
31+
function updateLoginBtnState() {
32+
return updateButtonState({
33+
inputs: [emailInput, passwordInput],
34+
errors: [emailError, passwordError],
35+
button: loginBtn,
36+
});
37+
}
38+
39+
emailInput.addEventListener("blur", () => {
40+
validateEmail();
41+
updateLoginBtnState();
42+
});
43+
44+
passwordInput.addEventListener("blur", () => {
45+
validatePassword();
46+
updateLoginBtnState();
47+
});
48+
49+
emailInput.addEventListener("input", () => {
50+
validateEmail();
51+
updateLoginBtnState();
52+
});
53+
54+
passwordInput.addEventListener("input", () => {
55+
validatePassword();
56+
updateLoginBtnState();
57+
});
58+
59+
eyeIcon.addEventListener("click", () => {
60+
eyeIconClickHandler();
61+
});
62+
63+
loginForm.addEventListener("submit", (e) => {
64+
e.preventDefault();
65+
if (!loginBtn.disabled) {
66+
window.location.href = "/items";
67+
}
68+
});
69+
70+
preventPasswordSpaces(passwordInput);
71+
updateLoginBtnState(); // 초기 상태 업데이트

0 commit comments

Comments
 (0)