Skip to content

Commit f2bb5ef

Browse files
baeggminbaeggmin
authored
Merge pull request #71 from jaewon8405/Basic-이재원-sprint4
[이재원] sprint4
2 parents 3073577 + de88b5d commit f2bb5ef

File tree

7 files changed

+212
-9
lines changed

7 files changed

+212
-9
lines changed

‎images/password-icon1.png renamed to ‎images/eye-close.png

File renamed without changes.

‎images/password-icon2.png renamed to ‎images/eye-open.png

File renamed without changes.

‎login.html

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"
1313
/>
1414
<link rel="stylesheet" href="styles/global.css" />
15-
<link rel="stylesheet" href="styles/login-signup.css" />
15+
<link rel="stylesheet" href="styles/auth.css" />
1616
</head>
1717

1818
<body>
@@ -21,19 +21,23 @@
2121
<img src="images/logo.png" alt="판다마켓" class="login-log" />
2222
</a>
2323
<div class="login-content">
24-
<form action="/login" method="POST" class="login-form">
24+
<form action="items.html" method="get" class="login-form">
2525
<div class="form-group">
2626
<label for="userId">이메일</label>
2727
<input id="userId" type="email" name="email" />
28+
<p id="IdError" style="display: none; color: red"></p>
2829
</div>
2930
<div class="form-group">
3031
<label for="password">비밀번호</label>
3132
<div class="input-wrapper">
3233
<input id="password" type="password" name="password" />
33-
<img src="images/password-icon1.png" alt="보기 아이콘" />
34+
<img id="viewIcon" src="images/eye-close.png" alt="보기 아이콘" />
35+
<p id="passwordError" style="display: none; color: red"></p>
3436
</div>
3537
</div>
36-
<a href="login.html" class="login-btn button">로그인</a>
38+
<button type="submit" id="loginBtn" class="login-btn button" disabled>
39+
로그인
40+
</button>
3741
</form>
3842
<div class="simple-login">
3943
간편 로그인하기
@@ -51,5 +55,6 @@
5155
</div>
5256
</div>
5357
</div>
58+
<script src="login.js"></script>
5459
</body>
5560
</html>

‎login.js

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
const $userId = document.querySelector('#userId');
2+
const $IdError = document.querySelector('#IdError');
3+
const $password = document.querySelector('#password');
4+
const $passwordError = document.querySelector('#passwordError');
5+
const $loginBtn = document.querySelector('#loginBtn');
6+
const $viewIcon = document.querySelector('#viewIcon');
7+
let idCheck = false;
8+
let passwordCheck = false;
9+
10+
function btnCheck() {
11+
if (idCheck && passwordCheck) {
12+
$loginBtn.disabled = false;
13+
} else {
14+
$loginBtn.disabled = true;
15+
}
16+
}
17+
18+
function handleFocustOutId() {
19+
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
20+
const value = $userId.value.trim();
21+
if (value === '') {
22+
$IdError.style.display = 'block';
23+
$IdError.innerText = '이메일을 입력해주세요.';
24+
$userId.style.border = '2px solid red';
25+
idCheck = false;
26+
} else if (!emailPattern.test(value)) {
27+
$IdError.style.display = 'block';
28+
$IdError.innerText = '잘못된 이메일 형식입니다.';
29+
$userId.style.border = '2px solid red';
30+
idCheck = false;
31+
} else {
32+
$IdError.style.display = 'none';
33+
$userId.style.border = '';
34+
idCheck = true;
35+
}
36+
btnCheck();
37+
}
38+
function handleFocutOutPassWord() {
39+
const value = $password.value.trim();
40+
if (value === '') {
41+
$passwordError.style.display = 'block';
42+
$passwordError.innerText = '비밀번호를 입력해주세요.';
43+
$password.style.border = '2px solid red';
44+
passwordCheck = false;
45+
} else if (value.length < 8) {
46+
$passwordError.style.display = 'block';
47+
$passwordError.innerText = '비밀번호를 8자 이상 입력해주세요.';
48+
$password.style.border = '2px solid red';
49+
passwordCheck = false;
50+
} else {
51+
$passwordError.style.display = 'none';
52+
$password.style.border = '';
53+
passwordCheck = true;
54+
}
55+
btnCheck();
56+
}
57+
58+
function handlePassWordView() {
59+
const isPassWordVisible = $password.type === 'text';
60+
$password.type = isPassWordVisible ? 'password' : 'text';
61+
$viewIcon.src = isPassWordVisible
62+
? 'images/eye-close.png'
63+
: 'images/eye-open.png';
64+
}
65+
66+
$userId.addEventListener('focusout', handleFocustOutId);
67+
$password.addEventListener('focusout', handleFocutOutPassWord);
68+
$viewIcon.addEventListener('click', handlePassWordView);

‎signup.html

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"
1313
/>
1414
<link rel="stylesheet" href="styles/global.css" />
15-
<link rel="stylesheet" href="styles/login-signup.css" />
15+
<link rel="stylesheet" href="styles/auth.css" />
1616
</head>
1717

1818
<body>
@@ -21,30 +21,41 @@
2121
<img src="images/logo.png" alt="판다마켓" class="signup-logo" />
2222
</a>
2323
<div class="signup-content">
24-
<form action="/signup" method="POST" class="signup-form">
24+
<form action="login.html" method="POST" class="signup-form">
2525
<div class="form-group">
2626
<label for="userId">이메일</label>
2727
<input id="userId" type="email" name="email" />
28+
<p id="IdError" style="display: none; color: red"></p>
2829
</div>
2930
<div class="form-group">
3031
<label for="nickname">닉네임</label>
3132
<input id="nickname" type="text" name="text" />
33+
<p id="nicknameError" style="display: none; color: red"></p>
3234
</div>
3335
<div class="form-group">
3436
<label for="password">비밀번호</label>
3537
<div class="input-wrapper">
3638
<input id="password" type="password" name="password" />
37-
<img src="images/password-icon1.png" alt="보기 아이콘" />
39+
<img id="viewIcon" src="images/eye-close.png" alt="보기 아이콘" />
40+
<p id="passwordError" style="display: none; color: red"></p>
3841
</div>
3942
</div>
4043
<div class="form-group">
4144
<label for="passwordCheck">비밀번호 확인</label>
4245
<div class="input-wrapper">
4346
<input id="passwordCheck" type="text" name="text" />
44-
<img src="images/password-icon2.png" alt="보기 아이콘" />
47+
<img id="viewIcon2" src="images/eye-open.png" alt="보기 아이콘" />
48+
<p id="passwordCheckError" style="display: none; color: red"></p>
4549
</div>
4650
</div>
47-
<a href="login.html" class="signup-btn button">회원가입</a>
51+
<button
52+
type="submit"
53+
id="signupBtn"
54+
class="signup-btn button"
55+
disabled
56+
>
57+
회원가입
58+
</button>
4859
</form>
4960
<div class="simple-login">
5061
간편 로그인하기
@@ -62,5 +73,6 @@
6273
</div>
6374
</div>
6475
</div>
76+
<script src="signup.js"></script>
6577
</body>
6678
</html>

‎signup.js

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
const $userId = document.querySelector('#userId');
2+
const $IdError = document.querySelector('#IdError');
3+
const $nickName = document.querySelector('#nickname');
4+
const $nicknameError = document.querySelector('#nicknameError');
5+
const $password = document.querySelector('#password');
6+
const $passwordError = document.querySelector('#passwordError');
7+
const $passwordCheck = document.querySelector('#passwordCheck');
8+
const $passwordCheckError = document.querySelector('#passwordCheckError');
9+
const $signupBtn = document.querySelector('#signupBtn');
10+
const $viewIcon = document.querySelector('#viewIcon');
11+
const $viewIcon2 = document.querySelector('#viewIcon2');
12+
let idCheck = false;
13+
let passwordCheck = false;
14+
let nicknameCheck = false;
15+
let passwordAuthCheck = false;
16+
17+
function btnCheck() {
18+
if (idCheck && passwordCheck && nicknameCheck && passwordAuthCheck) {
19+
$signupBtn.disabled = false;
20+
} else {
21+
$signupBtn.disabled = true;
22+
}
23+
}
24+
25+
function handleFocustOutId() {
26+
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
27+
const value = $userId.value.trim();
28+
if (value === '') {
29+
$IdError.style.display = 'block';
30+
$IdError.innerText = '이메일을 입력해주세요.';
31+
$userId.style.border = '2px solid red';
32+
idCheck = false;
33+
} else if (!emailPattern.test(value)) {
34+
$IdError.style.display = 'block';
35+
$IdError.innerText = '잘못된 이메일 형식입니다.';
36+
$userId.style.border = '2px solid red';
37+
idCheck = false;
38+
} else {
39+
$IdError.style.display = 'none';
40+
$userId.style.border = '';
41+
idCheck = true;
42+
}
43+
btnCheck();
44+
}
45+
46+
function handleFocusOutNickName() {
47+
const value = $nickName.value.trim();
48+
if (value === '') {
49+
$nicknameError.style.display = 'block';
50+
$nicknameError.innerText = '닉네임을 입력해주세요.';
51+
$nickName.style.border = '2px solid red';
52+
passwordCheck = false;
53+
} else {
54+
$nicknameError.style.display = 'none';
55+
$nickName.style.border = '';
56+
nicknameCheck = true;
57+
}
58+
btnCheck();
59+
}
60+
61+
function handleFocutOutPassWord() {
62+
const value = $password.value.trim();
63+
if (value === '') {
64+
$passwordError.style.display = 'block';
65+
$passwordError.innerText = '비밀번호를 입력해주세요.';
66+
$password.style.border = '2px solid red';
67+
passwordCheck = false;
68+
} else if (value.length < 8) {
69+
$passwordError.style.display = 'block';
70+
$passwordError.innerText = '비밀번호를 8자 이상 입력해주세요.';
71+
$password.style.border = '2px solid red';
72+
passwordCheck = false;
73+
} else {
74+
$passwordError.style.display = 'none';
75+
$password.style.border = '';
76+
passwordCheck = true;
77+
}
78+
btnCheck();
79+
}
80+
81+
function handleFocusOutPassWordCheck() {
82+
const value = $passwordCheck.value.trim();
83+
if (value === $password.value) {
84+
$passwordCheckError.style.display = 'none';
85+
$passwordCheck.style.border = '';
86+
passwordAuthCheck = true;
87+
} else {
88+
$passwordCheckError.style.display = 'block';
89+
$passwordCheckError.innerText = '비밀번호가 일치하지 않습니다.';
90+
$passwordCheck.style.border = '2px solid red';
91+
passwordAuthCheck = false;
92+
}
93+
btnCheck();
94+
}
95+
96+
function handlePassWordView() {
97+
const isPassWordVisible = $password.type === 'text';
98+
$password.type = isPassWordVisible ? 'password' : 'text';
99+
$viewIcon.src = isPassWordVisible
100+
? 'images/eye-close.png'
101+
: 'images/eye-open.png';
102+
}
103+
104+
function handlePassWordView2() {
105+
const isPassWordVisible = $passwordCheck.type === 'text';
106+
$passwordCheck.type = isPassWordVisible ? 'password' : 'text';
107+
$viewIcon2.src = isPassWordVisible
108+
? 'images/eye-close.png'
109+
: 'images/eye-open.png';
110+
}
111+
112+
$userId.addEventListener('focusout', handleFocustOutId);
113+
$password.addEventListener('focusout', handleFocutOutPassWord);
114+
$nickName.addEventListener('focusout', handleFocusOutNickName);
115+
$passwordCheck.addEventListener('focusout', handleFocusOutPassWordCheck);
116+
$viewIcon.addEventListener('click', handlePassWordView);
117+
$viewIcon2.addEventListener('click', handlePassWordView2);

‎styles/login-signup.css renamed to ‎styles/auth.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@
7373
.signup-btn {
7474
height: 56px;
7575
border-radius: 40px;
76+
font-size: 20px;
7677
}
7778

7879
.simple-login {

0 commit comments

Comments
 (0)