diff --git a/global.css b/global.css index 0534a22e..4e8ddea2 100644 --- a/global.css +++ b/global.css @@ -10,10 +10,6 @@ html, body { width: 100%; height: 100%; font-family: 'Noto Sans KR', sans-serif; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; } a { @@ -21,9 +17,22 @@ a { color: #3692FF; } -form { +/* form { display: flex; flex-direction: column; justify-content: space-around; gap: 16px; + width: 100%; +} */ + +/* PC: 1200px 이상 */ +@media (min-width: 1200px) { +} + +/* Tablet: 768px 이상 ~ 1199px 이하 */ +@media (min-width: 768px) and (max-width: 1199px) { + } + + /* Mobile: 375px 이상 ~ 767px 이하 */ +@media (min-width: 375px) and (max-width: 767px) { } \ No newline at end of file diff --git a/image/Img_home_bottom.png b/image/home/bottomPanda_home.png similarity index 100% rename from image/Img_home_bottom.png rename to image/home/bottomPanda_home.png diff --git a/image/Img_home_01.png b/image/home/itemBox_home.png similarity index 100% rename from image/Img_home_01.png rename to image/home/itemBox_home.png diff --git a/image/Img_home_03.png b/image/home/registerBox_home.png similarity index 100% rename from image/Img_home_03.png rename to image/home/registerBox_home.png diff --git a/image/Img_home_02.png b/image/home/searchBox_home.png similarity index 100% rename from image/Img_home_02.png rename to image/home/searchBox_home.png diff --git a/image/Img_home_top.png b/image/home/topPanda_home.png similarity index 100% rename from image/Img_home_top.png rename to image/home/topPanda_home.png diff --git a/login/login-image/eyeclosed.png b/image/icon/eyeclosed_icon.png similarity index 100% rename from login/login-image/eyeclosed.png rename to image/icon/eyeclosed_icon.png diff --git a/signup/signup-image/eyeopen.png b/image/icon/eyeopen_icon.png similarity index 100% rename from signup/signup-image/eyeopen.png rename to image/icon/eyeopen_icon.png diff --git a/image/ic_facebook.png b/image/icon/facebook_icon.png similarity index 100% rename from image/ic_facebook.png rename to image/icon/facebook_icon.png diff --git a/login/login-image/google.png b/image/icon/google_icon.png similarity index 100% rename from login/login-image/google.png rename to image/icon/google_icon.png diff --git a/image/ic_instagram.png b/image/icon/insta_icon.png similarity index 100% rename from image/ic_instagram.png rename to image/icon/insta_icon.png diff --git a/login/login-image/kakaotalk.png b/image/icon/kakaotalk_icon.png similarity index 100% rename from login/login-image/kakaotalk.png rename to image/icon/kakaotalk_icon.png diff --git a/image/ic_x.png b/image/icon/x_icon.png similarity index 100% rename from image/ic_x.png rename to image/icon/x_icon.png diff --git a/image/ic_youtube.png b/image/icon/youtube_icon.png similarity index 100% rename from image/ic_youtube.png rename to image/icon/youtube_icon.png diff --git a/image/login-top.png b/image/login-top.png deleted file mode 100644 index 2d1c7389..00000000 Binary files a/image/login-top.png and /dev/null differ diff --git a/image/Panda=lg.png b/image/logo/pandaHome_logo.png similarity index 100% rename from image/Panda=lg.png rename to image/logo/pandaHome_logo.png diff --git a/login/login-image/pandalogo.png b/image/logo/pandaLogin_logo.png similarity index 100% rename from login/login-image/pandalogo.png rename to image/logo/pandaLogin_logo.png diff --git a/image/meta/meta_FuBao.jpg b/image/meta/meta_FuBao.jpg new file mode 100644 index 00000000..8f89896c Binary files /dev/null and b/image/meta/meta_FuBao.jpg differ diff --git a/image/show.png b/image/show.png deleted file mode 100644 index 25acc347..00000000 Binary files a/image/show.png and /dev/null differ diff --git a/index.html b/index.html index 3342ca19..31c16303 100644 --- a/index.html +++ b/index.html @@ -2,16 +2,30 @@ + + 판다마켓 + + + + + + + + + + + +
- 판다마켓로고 + 판다마켓로고 로그인
@@ -20,14 +34,16 @@

일상의 모든 물건을
거래해보세요

구경하러 가기 - 상단배경 +
+ 상단배경 +
-
+
- 상품확인 + 상품확인
Hot item @@ -35,19 +51,19 @@

인기 상품을
확인해 보세요

가장 HOT한 중고거래 물품을
판다 마켓에서 확인해 보세요

-
+
Search

구매를 원하는
상품을 검색하세요

구매하고 싶은 물품은 검색해서
쉽게 찾아보세요

- 상품검색 + 상품검색
-
+
- 상품등록 + 상품등록
Resister @@ -61,7 +77,9 @@

판매를 원하는
상품을 등록하세요

믿을 수 있는
판다마켓 중고 거래

- 하단배경 +
+ 하단배경 +
@@ -75,18 +93,19 @@

믿을 수 있는
판다마켓 중고 거래

+ \ No newline at end of file diff --git a/login/login.css b/login/login.css index 9b10f332..41406d72 100644 --- a/login/login.css +++ b/login/login.css @@ -1,3 +1,37 @@ +body { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 700px; + height: auto; + margin-top: 140px; + margin-bottom: 140px; +} + +form { + display: flex; + flex-direction: column; + justify-content: space-around; + gap: 16px; + width: 100%; +} + +@media (max-width: 767px) { + .container { + padding: 0 16px; + width: 100%; + max-width: 700px; + } +} + .pandalogo { width: 266px; height: 90px; @@ -9,6 +43,7 @@ display: flex; flex-direction: column; gap: 10px; + width: 100%; } label { @@ -17,7 +52,8 @@ label { } input { - width: 640px; + width: 100%; + /* width: 640px; */ height: 56px; background-color: #F3F4F6; border: 1px solid #F3F4F6; @@ -25,6 +61,19 @@ input { padding-left: 24px; } +#emailError, +#passwordError { + color: #F74747; + /* border-color: #F74747; 이건 텍스트 태그엔 적용 안되므로 따로 설정 필요.. */ + font-size: 14px; + padding-left: 8px; +} + +.input-error { + border: 1px solid #F74747; + background-color: #F3F4F6; +} + .input-wrapper { position: relative; } @@ -42,7 +91,8 @@ input { display: flex; justify-content: center; align-items: center; - width: 640px; + width: 100%; + /* width: 640px; */ height: 56px; background-color: #3692FF; margin-top: 24px; @@ -52,10 +102,18 @@ input { text-decoration: none; } +.login-button.disabled { + background-color: #D1D5DB; + color: white; + pointer-events: none; /* 클릭 비활성화 */ + opacity: 0.6; +} + .simple-login { display: flex; flex-direction: column; - width: 640px; + width: 100%;; + /* width: 640px; */ height: 74px; background-color: #E6F2FF; margin: 24px; diff --git a/login/login.html b/login/login.html index 6bc80ef3..99830e8d 100644 --- a/login/login.html +++ b/login/login.html @@ -10,36 +10,44 @@ 로그인 +
- +
- 비밀번호 보기 + 비밀번호 보기
+

- + +
+ \ No newline at end of file diff --git a/login/login.js b/login/login.js new file mode 100644 index 00000000..d638e349 --- /dev/null +++ b/login/login.js @@ -0,0 +1,78 @@ +const emailInput = document.getElementById("login-email"); +const passwordInput = document.getElementById("login-password"); +const emailError = document.getElementById("emailError"); +const passwordError = document.getElementById("passwordError"); +const togglePassword = document.getElementById("togglePassword"); +const loginBtn = document.getElementById("loginBtn"); + +function validateEmail(email) { + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + return emailRegex.test(email); +} + +function checkValidity() { + const emailValid = validateEmail(emailInput.value); + const passwordValid = passwordInput.value.length >= 8; + const errors = emailError.textContent || passwordError.textContent; + +if (emailInput.value && passwordInput.value && emailValid && passwordValid && !errors) { + loginBtn.classList.remove("disabled"); +} else { + loginBtn.classList.add("disabled"); +} +} + + //이메일 확인 +emailInput.addEventListener("blur", () => { + const value = emailInput.value.trim(); + if (value === "") { + emailError.textContent = "이메일을 입력해주세요."; + emailInput.classList.add("input-error"); + } else if (!validateEmail(value)) { + emailError.textContent = "잘못된 이메일 형식입니다."; + emailInput.classList.add("input-error"); + } else { + emailError.textContent = ""; + emailInput.classList.remove("input-error"); + } + checkValidity(); + }); + + //비밀번호 확인 +passwordInput.addEventListener("blur", () => { + const value = passwordInput.value.trim(); + if (value === "") { + passwordError.textContent = "비밀번호를 입력해주세요."; + passwordInput.classList.add("input-error"); + } else if (value.length < 8) { + passwordError.textContent = "비밀번호를 8자 이상 입력해주세요."; + passwordInput.classList.add("input-error"); + } else { + passwordError.textContent = ""; + passwordInput.classList.remove("input-error"); + } + checkValidity(); + }); + +// //비밀번호 눈 가리기 +// togglePassword.addEventListener("click", () => { +// const eyePassword = passwordInput.getAttribute.type === "password"; + +// passwordInput.type = eyePassword ? "text" : "password"; + +// togglePassword.src = eyePassword +// ? "../image/icon/eyeopen_icon.png" +// : "../image/icon/eyeclosed_icon.png"; +// }) + +loginBtn.addEventListener("click", (e) => { + e.preventDefault(); //a 태그의 기본 이동 막음 + const emailLogin = validateEmail(emailInput.value.trim()); + const passwordLogin = passwordInput.value.trim().length >= 8; + const errorLogin = emailError.textContent || passwordError.textContent; + + if (emailInput.value && passwordInput.value && emailLogin && passwordLogin && !errorLogin) { + window.location.href = "/items"; + } +}); + diff --git a/signup/signup-image/eyeclosed.png b/signup/signup-image/eyeclosed.png deleted file mode 100644 index e83c4077..00000000 Binary files a/signup/signup-image/eyeclosed.png and /dev/null differ diff --git a/signup/signup-image/google.png b/signup/signup-image/google.png deleted file mode 100644 index b7756f76..00000000 Binary files a/signup/signup-image/google.png and /dev/null differ diff --git a/signup/signup-image/kakaotalk.png b/signup/signup-image/kakaotalk.png deleted file mode 100644 index ba7c6100..00000000 Binary files a/signup/signup-image/kakaotalk.png and /dev/null differ diff --git a/signup/signup-image/pandalogo.png b/signup/signup-image/pandalogo.png deleted file mode 100644 index e9fd4d98..00000000 Binary files a/signup/signup-image/pandalogo.png and /dev/null differ diff --git a/signup/signup.css b/signup/signup.css index ab3d1d76..933383f3 100644 --- a/signup/signup.css +++ b/signup/signup.css @@ -1,9 +1,33 @@ +body { + display: flex; + justify-content: center; + align-items: center; +} + +.container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 700px; + margin-top: 120px; + margin-bottom: 120px; +} + .pandalogo { width: 266px; height: 90px; margin-bottom: 40px; } +@media (max-width: 767px) { + .container { + padding: 0 16px; + width: 100%; + max-width: 700px; + } +} + .email-container, .nickname-container, .password-container, @@ -13,13 +37,22 @@ gap: 10px; } +form { + display: flex; + flex-direction: column; + justify-content: space-around; + gap: 16px; + width: 100%; +} + label { font-weight: 500; font-size: 16px; } input { - width: 640px; + width: 100%; + /* width: 640px; */ height: 56px; background-color: #F3F4F6; border: 1px solid #F3F4F6; @@ -31,6 +64,20 @@ input { position: relative; } +#emailError, +#nicknameError, +#passwordError, +#passwordDoubleError { + color: #F74747; + font-size: 14px; + padding-left: 8px; +} + +.input-error { + border: 1px solid #F74747; + background-color: #F3F4F6; +} + .eyeclosed-icon { position: absolute; right: 24px; @@ -53,7 +100,8 @@ input { display: flex; justify-content: center; align-items: center; - width: 640px; + width: 100%; + /* width: 640px; */ height: 56px; background-color: #3692FF; margin-top: 24px; @@ -63,10 +111,18 @@ input { text-decoration: none; } +.signup-button.disabled { + background-color: #D1D5DB; + color: white; + pointer-events: none; /* 클릭 비활성화 */ + opacity: 0.6; +} + .simple-login { display: flex; flex-direction: column; - width: 640px; + width: 100%; + /* width: 640px; */ height: 74px; background-color: #E6F2FF; margin: 24px; diff --git a/signup/signup.html b/signup/signup.html index 74df28ae..fe5840a2 100644 --- a/signup/signup.html +++ b/signup/signup.html @@ -10,47 +10,54 @@ 회원가입 +
- +
- + +

- 비밀번호 보기 + 비밀번호 보기
+

- 비밀번호 확인하기 + 비밀번호 확인하기
+

- + +
+ \ No newline at end of file diff --git a/signup/signup.js b/signup/signup.js new file mode 100644 index 00000000..37cb670b --- /dev/null +++ b/signup/signup.js @@ -0,0 +1,124 @@ +const emailInput = document.getElementById("login-email"); +const nicknameInput = document.getElementById("nickname"); +const passwordInput = document.getElementById("signup-password"); +const passwordDoubleInput = document.getElementById("signup-password-check"); +const emailError = document.getElementById("emailError"); +const nicknameError = document.getElementById("nicknameError"); +const passwordError = document.getElementById("passwordError"); +const passwordDoubleError = document.getElementById("passwordDoubleError"); +const signupBtn = document.getElementById("signup-button"); + +function validateEmail(email) { + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + return emailRegex.test(email); +} + +// 아래 재확인 (완) + +function checkValidity() { + const emailValid = validateEmail(emailInput.value); + const passwordValid = passwordInput.value.length >= 8; + const passwordDoubleValid = passwordInput.value === passwordDoubleInput.value; + const nicknameValid = nicknameInput.value.trim() !== ""; + const errors = emailError.textContent || passwordError.textContent || nicknameError.textContent; + +if ( + emailInput.value && + nicknameInput.value && + passwordInput.value && + passwordDoubleInput.value && + emailValid && + nicknameValid && + passwordDoubleValid && + passwordValid && + !errors +) { + signupBtn.classList.remove("disabled"); +} else { + signupBtn.classList.add("disabled"); +} +} + + //이메일 확인 +emailInput.addEventListener("blur", () => { + const value = emailInput.value.trim(); + if (value === "") { + emailError.textContent = "이메일을 입력해주세요."; + emailInput.classList.add("input-error"); + } else if (!validateEmail(value)) { + emailError.textContent = "잘못된 이메일 형식입니다."; + emailInput.classList.add("input-error"); + } else { + emailError.textContent = ""; + emailInput.classList.remove("input-error"); + } + checkValidity(); + }); + + //닉네임 확인 +nicknameInput.addEventListener("blur", () => { + const value = nicknameInput.value.trim(); + if (value === "") { + nicknameError.textContent = "닉네임을 입력해주세요."; + nicknameInput.classList.add("input-error"); + } else { + nicknameError.textContent = ""; + nicknameInput.classList.remove("input-error"); + } + checkValidity(); + }); + + //비밀번호 확인 +passwordInput.addEventListener("blur", () => { + const value = passwordInput.value.trim(); + if (value === "") { + passwordError.textContent = "비밀번호를 입력해주세요."; + passwordInput.classList.add("input-error"); + } else if (value.length < 8) { + passwordError.textContent = "비밀번호를 8자 이상 입력해주세요."; + passwordInput.classList.add("input-error"); + } else { + passwordError.textContent = ""; + passwordInput.classList.remove("input-error"); + } + checkValidity(); + }); + + //비밀번호 더블 확인 +passwordDoubleInput.addEventListener("blur", () => { + const value = passwordDoubleInput.value.trim(); + if (value === "") { + passwordDoubleError.textContent = "비밀번호를 입력해주세요."; + passwordDoubleInput.classList.add("input-error"); + } else if (passwordInput.value !== passwordDoubleInput.value) { + passwordDoubleError.textContent = "비밀번호가 일치하지 않습니다."; + passwordDoubleInput.classList.add("input-error"); + } else { + passwordError.textContent = ""; + passwordInput.classList.remove("input-error"); + } + checkValidity(); + }); + + //회원가입 버튼 +signupBtn.addEventListener("click", (e) => { + e.preventDefault(); + const emailSignup = validateEmail(emailInput.value.trim()); + const nicknameSignup = nicknameInput.value.trim() !== ""; + const passwordSignup = passwordInput.value.trim().length >= 8; + const passwordDoubleSignup = passwordInput.value === passwordDoubleInput.value; + const errorSignup = emailError.textContent || passwordError.textContent || nicknameError.textContent; + + if ( + emailInput.value && + passwordInput.value && + emailSignup && + nicknameSignup && + passwordSignup && + passwordDoubleSignup && + !errorSignup + ) { + window.location.href = "/items"; + } +}); + diff --git a/style.css b/style.css index fd559dcb..36be0245 100644 --- a/style.css +++ b/style.css @@ -26,6 +26,7 @@ header { position: fixed; width: 100%; height: 55px; + z-index: 10; } .logo-container { @@ -54,13 +55,26 @@ header { .hometop { background-color: #dbeafe; - height: 400px; + height: 500px; display: flex; justify-content: center; align-items: flex-end; padding: 0 80px; } +.ppanda { + max-width: 600px; + height: auto; + display: flex; + align-items: flex-end; + justify-content: center; +} + +.hi { + width: 100%; + height: auto; +} + .hometop-left { display: flex; flex-direction: column; @@ -68,6 +82,7 @@ header { gap: 20px; position: relative; bottom: 80px; + padding-top: 80px; } .top_text { @@ -75,6 +90,47 @@ header { font-size: 24px; } +@media (min-width: 768px) and (max-width: 1199px) { + + .hometop { + flex-direction: column; + align-items: center; + padding-left: 24px; + padding-right: 24px; + padding-top: 100px; + height: auto; + } + + .ppanda img { + width: 400px; + } + + .top_text { + font-size: 20px; + text-align: center; + } +} + +@media (min-width: 375px) and (max-width: 767px) { + .hometop { + flex-direction: column; + align-items: center; + padding-left: 16px; + padding-right: 16px; + padding-top: 100px; + height: auto; + } + + .ppanda img { + width: 300px; + } + + .top_text { + font-size: 16px; + text-align: center; + } +} + .looking-button { display: flex; justify-content: center; @@ -91,10 +147,6 @@ header { cursor: pointer; } -.hi { - width: 500px; - height: 250px; -} .middle { margin-top: 85px; @@ -139,7 +191,7 @@ header { color: #4F4F4F; } -.box1 { +.itembox { display: flex; flex-direction: row; justify-content: center; @@ -151,7 +203,7 @@ header { border-radius: 12px; } -.box2 { +.searchbox { display: flex; flex-direction: row; justify-content: center; @@ -163,7 +215,7 @@ header { border-radius: 12px; } -.box3 { +.registerbox { display: flex; flex-direction: row; justify-content: center; @@ -195,6 +247,20 @@ header { padding: 0 80px; } +.twoppanda { + max-width: 600px; + height: auto; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-end; + } + +.bye { + width: 100%; + height: auto; + } + .bottom-center { display: flex; flex-direction: row; @@ -206,6 +272,9 @@ header { color: #4F4F4F; font-size: 24px; display: flex; + flex-direction: column; + justify-content: center; + align-items: center; position: relative; bottom: 40px; } @@ -215,6 +284,54 @@ header { height: 255px; } +@media (min-width: 768px) and (max-width: 1199px) { + + .bottom { + flex-direction: column; + align-items: center; + padding-left: 24px; + padding-right: 24px; + padding-top: 100px; + height: auto; + } + + .bottom_text { + font-size: 20px; + text-align: center; + } + + .twoppanda img { + max-width: 400px; + } +} + +@media (min-width: 375px) and (max-width: 767px) { + .bottom { + flex-direction: column; + align-items: center; + padding-left: 16px; + padding-right: 16px; + padding-top: 100px; + height: auto; + } + + .bottom-center { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + + .bottom_text { + font-size: 20px; + text-align: center; + } + + .twoppanda img { + max-width: 300px; + } +} + footer { background-color: #111827; height: 160px;