+ 
+ 
+
Hot item
@@ -55,7 +72,7 @@
-
+
Search
@@ -74,7 +91,7 @@
-
+
Register
diff --git a/login.html b/login.html
index 8b1ea14a..3227fdce 100644
--- a/login.html
+++ b/login.html
@@ -1 +1,62 @@
-loginn
\ No newline at end of file
+
+
+ 로그인페이지
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/panda.css b/panda.css
deleted file mode 100644
index f7addaaf..00000000
--- a/panda.css
+++ /dev/null
@@ -1,135 +0,0 @@
-* {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- }
-a ,a > button {
- cursor: pointer;
-}
-/* header */
-.header_top_container {
- height: 70px;
- display: flex;
- justify-content: center;
-}
-.header_top_box {
- width: 55%;
- display: flex;
- justify-content: space-between;
-}
-.header_top_logo {
- display: flex;
- align-items: center;
- width: 150px;
-}
-.header_top_login {
- display: flex;
- align-items: center;
-}
-.logo_img {
- width: 100%;
- height: 100%;
- object-fit: contain;
-}
-.login_button {
- padding: 11px 42px;
- border-radius: 8px;
- background-color: #3692FF;
- color: white;
- border: none;
-}
-/* banner */
-.header_banner ,.footer_banner {
- background-color: #CFE5FF;
- height: 540px;
- padding: 200px 0 0;
-}
-.header_banner_container ,.footer_banner_container {
- width: 1110px;
- height: 340px;
- margin: 0 auto;
- display: flex;
- align-items: center;
- flex-direction: row;
- justify-content: flex-end;
- overflow: hidden;
-}
-.header_banner_textbox , .footer_banner_textbox {
- margin: 40px 0;
- padding-bottom: 60px;
- display: flex;
- flex-direction: column;
-}
-.header_banner_imgbox , .footer_banner_imgbox {
- max-width: 750px;
- min-width: 500px;
- width: 100%;
-}
-.link_itmes_button {
- padding: 12px 124px;
- width: 100%;
- border-radius: 8px;
- color: white;
- border: none;
- background-color: #3692FF;
-}
-.header_img , .footer_img {
- display: block;
- width: 100%;
- height: 100%;
- object-fit: cover;
-}
-.header_banner h1 , .footer_banner h1 {
- font-size: 40px;
-}
-
-
-/* content */
-.content {
- max-width: 900px;
- background-color: #fcfcfc;
- display: flex;
- flex-direction: row;
- margin: 138px auto;
- justify-content: center;
- align-items: center;
- gap: 64px;
-
-}
-.content_img_container {
- width: 580px;
-}
-.content_img {
- width: 100%;
- height: 100%;
-}
-.content_font_container h2 {
- color: #3692FF;
-}
-
-/* footer */
-.footer {
- background-color: black;
- color: white;
- height: 140px;
- display: flex;
- align-items: flex-start;
- justify-content: center;
-}
-.footer_container {
- width: 1140px;
- display: flex;
- align-items: center;
- justify-content: space-between;
-}
-
-.footer a {
- color: #fcfcfc;
- text-decoration: none;
-}
-.footer_link {
- display: flex;
- justify-content: space-around;
- padding: 10px;
- gap: 10px;
-}
\ No newline at end of file
diff --git a/script/login-signup.js b/script/login-signup.js
new file mode 100644
index 00000000..02d3958f
--- /dev/null
+++ b/script/login-signup.js
@@ -0,0 +1,157 @@
+// 로그인
+const LoginInputs = document.querySelectorAll('.LoginInput');
+const loginBtn = document.getElementById('loginBtn');
+// 회원가입
+const SignupInputs = document.querySelectorAll('.SignupInput');
+const signupBtn = document.getElementById('signupBtn');
+
+
+// 로그인
+LoginInputs.forEach(function(input) {
+ input.addEventListener("input", checkInput);
+ input.addEventListener("focusout", checkInput);
+});
+// 회원가입
+SignupInputs.forEach(function(input) {
+ input.addEventListener("input", checkInput);
+ input.addEventListener("focusout", checkInput);
+})
+
+
+
+function checkInput(e) {
+ const input = e.target;
+ const inputText = input.value.trim();
+ const ErrMsg = input.parentElement.querySelector('.error-msg');
+ const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+ const typeEmail = input.type === "email";
+ const typePassword = input.classList.contains('signup-password-input') || input.classList.contains('login-password-input');
+ const typeCkPassword = input.classList.contains('signup-ckpassword-input');
+ const typeNickname = input.classList.contains('signup-nickname-input');
+ let hasError = false;
+
+
+ // 이메일
+ if (typeEmail) {
+ if (inputText === "") {
+ input.style.border = "1px solid red";
+ ErrMsg.style.display = "block";
+ ErrMsg.textContent = "이메일을 입력해주세요.";
+ hasError = true;
+ } else if (!emailPattern.test(inputText)) {
+ input.style.border = "1px solid red";
+ ErrMsg.style.display = "block";
+ ErrMsg.textContent = "잘못된 이메일 형식입니다.";
+ hasError = true;
+ }
+ }
+
+ // 비번
+ if (typePassword) {
+ if (inputText === "") {
+ input.style.border = "1px solid red";
+ ErrMsg.style.display = "block";
+ ErrMsg.textContent = "비밀번호를 입력해주세요.";
+ hasError = true;
+ } else if (inputText.length < 8) {
+ input.style.border = "1px solid red";
+ ErrMsg.style.display = "block";
+ ErrMsg.textContent = "비밀번호를 8자 이상 입력해주세요.";
+ hasError = true;
+ }
+ }
+
+ // 닉네임
+ if (typeNickname) {
+ if (inputText === "") {
+ input.style.border = "1px solid red";
+ ErrMsg.style.display = "block";
+ ErrMsg.textContent = "닉네임을 입력해주세요.";
+ hasError = true;
+ }
+ }
+
+ // 비밀번호 확인
+ if (typeCkPassword) {
+ const originPwInput = document.querySelector('.signup-password-input');
+ if (originPwInput) {
+ const originPw = originPwInput.value.trim();
+
+ if (inputText === "") {
+ input.style.border = "1px solid red";
+ ErrMsg.style.display = "block";
+ ErrMsg.style.color = "red";
+ ErrMsg.textContent = "비밀번호 확인을 입력해주세요.";
+ hasError = true;
+ } else if (inputText !== originPw) {
+ input.style.border = "1px solid red";
+ ErrMsg.style.display = "block";
+ ErrMsg.style.color = "red";
+ ErrMsg.textContent = "비밀번호가 일치하지 않습니다.";
+ hasError = true;
+ } else {
+ input.style.border = "none";
+ ErrMsg.style.display = "none";
+ }
+ }
+ }
+
+ // 정상화
+ if (!hasError && !typeCkPassword) {
+ input.style.border = "none";
+ ErrMsg.style.display = "none";
+ }
+
+ toggleButton();
+}
+
+//
+//
+//
+// 버튼 활성화시키기
+function toggleButton() {
+ // 로그인
+ console.log('11');
+ const emailInput = document.querySelector('.login-email-input');
+ const passwordInput = document.querySelector('.login-password-input');
+
+ if (emailInput && passwordInput) {
+ const checkEmail = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(emailInput.value.trim());
+ const checkPassword = passwordInput.value.trim().length >= 8;
+
+ if (checkEmail && checkPassword) {
+ loginBtn.disabled = false;
+ loginBtn.style.backgroundColor = "#3692FF";
+ loginBtn.style.cursor = "pointer";
+ }
+ else {
+ loginBtn.disabled = true;
+ loginBtn.style.backgroundColor = "#9CA3AF";
+ loginBtn.style.cursor = "default";
+ }
+ }
+
+
+ // 회원가입
+ const signupEmail = document.querySelector('.signup-email-input');
+ const signupNickname = document.querySelector('.signup-nickname-input');
+ const signupPw = document.querySelector('.signup-password-input');
+ const signupCkPw = document.querySelector('.signup-ckpassword-input');
+
+ if (signupEmail && signupNickname && signupPw && signupCkPw) {
+ const checkEmail = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(signupEmail.value.trim());
+ const checkNickname = signupNickname.value.trim() !== "";
+ const realPW = signupPw.value.trim().length >= 8;
+ const checkPW = signupPw.value.trim() === signupCkPw.value.trim();
+
+ if (checkEmail && checkNickname && realPW && checkPW) {
+ signupBtn.disabled = false;
+ signupBtn.style.backgroundColor = "#3692FF";
+ signupBtn.style.cursor = "pointer";
+ } else {
+ signupBtn.disabled = true;
+ signupBtn.style.backgroundColor = "#9CA3AF";
+ signupBtn.style.cursor = "default";
+ }
+ }
+}
\ No newline at end of file
diff --git a/signup.html b/signup.html
new file mode 100644
index 00000000..bcd30dcc
--- /dev/null
+++ b/signup.html
@@ -0,0 +1,69 @@
+
+
+ 회원가입페이지
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+ 
+