Skip to content

Commit 54048ef

Browse files
GANGYIKIMGANGYIKIM
authored
Merge pull request #37 from BZzzzi/Basic-김현진-sprint4
[김현진] sprint4
2 parents 1fea8e4 + 3b388e3 commit 54048ef

File tree

7 files changed

+371
-85
lines changed

7 files changed

+371
-85
lines changed

‎auth.js‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
// Auth 활성화
2+
const form = document.querySelector("form");
3+
const authBt = document.querySelector(".auth-bt");
4+
const loginBt = document.querySelector(".auth-bt.login");
5+
const joinBt = document.querySelector(".auth-bt.join");
6+
const emailInput = document.querySelector(".input-contain .email");
7+
const passwordInput = document.querySelector(".input-contain .password");
8+
const passwordConfirmInput = document.querySelector(
9+
".input-contain .password-confirm"
10+
);
11+
12+
form.addEventListener("input", () => {
13+
authBt.disabled = !form.checkValidity();
14+
});
15+
16+
const handleLoginClick = (e) => {
17+
e.preventDefault();
18+
window.location.href = "/items.html";
19+
};
20+
21+
if (loginBt) {
22+
loginBt.addEventListener("click", handleLoginClick);
23+
}
24+
25+
const handleJoinClick = (e) => {
26+
e.preventDefault();
27+
window.location.href = "/login.html";
28+
};
29+
30+
if (joinBt) {
31+
joinBt.addEventListener("click", handleJoinClick);
32+
}
33+
34+
// input 이메일 error 처리
35+
const emailNoneError = document.querySelector(".error-message.email-none");
36+
const emailWrongError = document.querySelector(".error-message.email-wrong");
37+
38+
const handleEmailFocusout = (e) => {
39+
const value = e.target.value.trim();
40+
if (value.length === 0) {
41+
emailNoneError.classList.add("show");
42+
emailInput.classList.add("error-box");
43+
emailWrongError.classList.remove("show");
44+
} else if (!emailInput.checkValidity()) {
45+
emailNoneError.classList.remove("show");
46+
emailInput.classList.add("error-box");
47+
emailWrongError.classList.add("show");
48+
} else {
49+
emailNoneError.classList.remove("show");
50+
emailWrongError.classList.remove("show");
51+
emailInput.classList.remove("error-box");
52+
}
53+
};
54+
emailInput.addEventListener("focusout", handleEmailFocusout);
55+
56+
// input 비밀번호 error 처리
57+
const passwordNoneError = document.querySelector(
58+
".error-message.password-none"
59+
);
60+
const passwordWrongError = document.querySelector(
61+
".error-message.password-wrong"
62+
);
63+
64+
let passwordValue = "";
65+
66+
const handlePasswordFocusout = (e) => {
67+
passwordValue = e.target.value.trim();
68+
if (passwordValue.length === 0) {
69+
passwordNoneError.classList.add("show");
70+
passwordInput.classList.add("error-box");
71+
passwordWrongError.classList.remove("show");
72+
} else if (!passwordInput.checkValidity()) {
73+
passwordNoneError.classList.remove("show");
74+
passwordInput.classList.add("error-box");
75+
passwordWrongError.classList.add("show");
76+
} else {
77+
passwordNoneError.classList.remove("show");
78+
passwordWrongError.classList.remove("show");
79+
passwordInput.classList.remove("error-box");
80+
}
81+
};
82+
passwordInput.addEventListener("focusout", handlePasswordFocusout);
83+
84+
// input 비밀번호 view 처리
85+
const passwordNoViewIcon = document.querySelector(".no-view-bt-icon");
86+
const passwordViewIcon = document.querySelector(".view-bt-icon");
87+
passwordNoViewIcon.classList.add("show");
88+
89+
const handlePasswordView = () => {
90+
const isHidden = passwordInput.type === "password";
91+
92+
if (isHidden) {
93+
passwordInput.type = "text";
94+
passwordViewIcon.classList.add("show");
95+
passwordNoViewIcon.classList.remove("show");
96+
} else {
97+
passwordInput.type = "password";
98+
passwordNoViewIcon.classList.add("show");
99+
passwordViewIcon.classList.remove("show");
100+
}
101+
};
102+
passwordNoViewIcon.addEventListener("click", handlePasswordView);
103+
passwordViewIcon.addEventListener("click", handlePasswordView);
104+
105+
// input 비밀번호 확인 view 처리
106+
const passwordConfirmNoViewIcon = document.querySelector(
107+
".no-view-bt-icon.confirm"
108+
);
109+
const passwordConfirmViewIcon = document.querySelector(".view-bt-icon.confirm");
110+
passwordConfirmNoViewIcon.classList.add("show");
111+
112+
const handlePasswordConfirmView = () => {
113+
const isHidden = passwordConfirmInput.type === "password";
114+
115+
if (isHidden) {
116+
passwordConfirmInput.type = "text";
117+
passwordConfirmViewIcon.classList.add("show");
118+
passwordConfirmNoViewIcon.classList.remove("show");
119+
} else {
120+
passwordConfirmInput.type = "password";
121+
passwordConfirmNoViewIcon.classList.add("show");
122+
passwordConfirmViewIcon.classList.remove("show");
123+
}
124+
};
125+
if (passwordConfirmNoViewIcon) {
126+
passwordConfirmNoViewIcon.addEventListener(
127+
"click",
128+
handlePasswordConfirmView
129+
);
130+
}
131+
132+
if (passwordConfirmViewIcon) {
133+
passwordConfirmViewIcon.addEventListener("click", handlePasswordConfirmView);
134+
}
135+
136+
// input 비밀번호 확인 error 처리
137+
const passwordConfirmError = document.querySelector(
138+
".error-message.password-confirm"
139+
);
140+
141+
const handlePasswordConfirm = (e) => {
142+
const passwordConfirmValue = e.target.value.trim();
143+
console.log(passwordConfirmValue);
144+
if (passwordValue !== passwordConfirmValue) {
145+
passwordConfirmError.classList.add("show");
146+
passwordConfirmInput.classList.add("error-box");
147+
} else {
148+
passwordConfirmError.classList.remove("show");
149+
passwordConfirmInput.classList.remove("error-box");
150+
}
151+
};
152+
if (passwordConfirmInput) {
153+
passwordConfirmInput.addEventListener("input", handlePasswordConfirm);
154+
}

‎images/logo.svg‎

Lines changed: 15 additions & 0 deletions
Loading

‎images/logo.webp‎

-2.86 KB
Binary file not shown.

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
<body>
4343
<header>
4444
<a href="/">
45-
<img src="/images/logo.webp" alt="판다마켓 로고" width="150" />
45+
<img src="/images/logo.svg" alt="판다마켓 로고" width="150" />
4646
</a>
4747
<a href="/login.html" class="button login">로그인</a>
4848
</header>

‎login.html‎

Lines changed: 51 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -17,36 +17,60 @@
1717
</head>
1818
<body>
1919
<div class="wrapper">
20-
<a href="/" class="logo">
21-
<img src="/images/logo.webp" alt="판다마켓 로고" width="300" />
20+
<a href="/">
21+
<img src="/images/logo.svg" alt="판다마켓 로고" width="300" />
2222
</a>
23-
<form action="">
24-
<label for="login-email">이메일</label>
25-
<input
26-
id="login-email"
27-
name="email"
28-
type="email"
29-
placeholder="이메일을 입력해주세요"
30-
/>
31-
32-
<label for="login-password">비밀번호</label>
33-
<div class="pw-wrapper">
23+
<form>
24+
<div class="input-contain">
25+
<label for="login-email">이메일</label>
3426
<input
35-
id="login-password"
36-
name="password"
37-
type="password"
38-
placeholder="비밀번호를 입력해주세요"
27+
id="login-email"
28+
name="email"
29+
type="email"
30+
required
31+
placeholder="이메일을 입력해주세요"
32+
class="email"
3933
/>
40-
<button type="button">
41-
<img
42-
src="/images/no-view-pw.webp"
43-
alt="비밀번호 뷰 아이콘"
44-
width="30"
45-
/>
46-
</button>
34+
<p class="error-message email-none">이메일을 입력해주세요.</p>
35+
<p class="error-message email-wrong">잘못된 이메일 형식입니다.</p>
4736
</div>
48-
49-
<button type="submit" class="button auth-bt">로그인</button>
37+
<div class="input-contain">
38+
<label for="login-password">비밀번호</label>
39+
<div class="pw-wrapper">
40+
<div class="bt-wrapper">
41+
<input
42+
id="login-password"
43+
name="password"
44+
type="password"
45+
required
46+
minlength="8"
47+
placeholder="비밀번호를 입력해주세요"
48+
class="password"
49+
/>
50+
<button type="button">
51+
<img
52+
src="/images/view-pw.webp"
53+
alt="비밀번호 보이는 아이콘"
54+
width="30"
55+
class="view-bt-icon"
56+
/>
57+
<img
58+
src="/images/no-view-pw.webp"
59+
alt="비밀번호 안 보이는 아이콘"
60+
width="30"
61+
class="no-view-bt-icon"
62+
/>
63+
</button>
64+
</div>
65+
<p class="error-message password-none">비민번호를 입력해주세요.</p>
66+
<p class="error-message password-wrong">
67+
비밀번호를 8자 이상 입력해주세요.
68+
</p>
69+
</div>
70+
</div>
71+
<button type="submit" class="button auth-bt login" disabled>
72+
로그인
73+
</button>
5074
</form>
5175

5276
<div class="simple-login">
@@ -76,5 +100,6 @@
76100
판다마켓이 처음이신가요? <a href="./signup.html">회원가입</a>
77101
</p>
78102
</div>
103+
<script type="module" src="./auth.js"></script>
79104
</body>
80105
</html>

0 commit comments

Comments
 (0)