codeit-bootcamp-frontend · arthurkimdev · Jun 17, 2024 · Jun 11, 2024 · Jun 11, 2024 · Jun 11, 2024
diff --git a/images/carrot_panda.png b/images/carrot_panda.png
diff --git a/images/판다얼굴.png → images/panda_face.png b/images/판다얼굴.png → images/panda_face.png
diff --git a/index.html b/index.html
@@ -6,14 +6,14 @@
     <meta property="og:url" content="https://panda-market-choiys.netlify.app/">
     <meta property="og:title" content="판다마켓">
     <meta property="og:type" content="website">
-    <meta property="og:image" content="https://panda-market-choiys.netlify.app/preview_img.png">
+    <meta property="og:image" content="https://panda-market-choiys.netlify.app/images/carrot_panda.png">
     <meta property="og:description" content="일상의 모든 물건을 거래해보세요">
     <title>판다마켓</title>
     <link rel="stylesheet" href="home.css">
     <link rel="stylesheet" href="home_tablet.css">
     <link rel="stylesheet" href="global.css">
     <link rel="stylesheet" href="home_mobile.css">
-    <link rel="icon" href="images/판다얼굴.png" />
+    <link rel="icon" href="images/panda_face.png" />
 </head>
 <body>
   <header>

diff --git a/login.css b/login.css
@@ -1,5 +1,6 @@
 * {
     box-sizing: border-box;
+    word-break: keep-all;
 }
 
 .logo {
@@ -55,6 +56,16 @@ button:focus {
     background-color: #3692FF;
 }
 
+.error {
+    color: red;
+    margin-left: 15px;
+    font-size: 14px;
+}
+
+.hide {
+    display: none;
+}
+
 #signup-pw,
 #signup-pwcheck {
     background: url('images/non_visibility.png') no-repeat 5px center;
@@ -63,6 +74,13 @@ button:focus {
     background-color: #F3F4F6;
 }
 
+.visibility {
+    background: url('images/visibility.png') no-repeat 5px center;
+    background-position : 97%;
+    background-size: 27px;
+    background-color: #F3F4F6;
+}
+
 
 button {
     width: 100%;

diff --git a/login.html b/login.html
@@ -6,7 +6,9 @@
     <title>판다마켓 로그인</title>
     <link rel="stylesheet" href="login.css">
     <link rel="stylesheet" href="global.css">
-    <link rel="icon" href="images/판다얼굴.png" />
+    <link rel="stylesheet" href="login_tablet.css">
+    <link rel="stylesheet" href="login_mobile.css">
+    <link rel="icon" href="images/panda_face.png" />
 </head>
 <body>
     <header>
@@ -19,13 +21,16 @@
             <label for="signup-email">이메일</lable>
             <input id="signup-email" name="email" type="email" 
                 placeholder="이메일을 입력해주세요" required>
+            <div class="error blank-message hide">이메일을 입력해주세요.</div>
+            <div class="error invalid-message hide">잘못된 이메일 형식입니다.</div>    
 
             <label for="signup-pw">비밀번호</lable>
                 <input id="signup-pw" name="pw" type="password" 
                 placeholder="비밀번호를 입력해주세요" required>
-
+            <div class="error blank-message3 hide">비밀번호를 입력해주세요.</div>
+            <div class="error longer-message hide">비밀번호를 8자 이상 입력해주세요.</div>    
             <div class="login-btn">
-            <a href=#><button>로그인</button></a>
+            <a href=/items.html><button>로그인</button></a>
             </div>
         </form>
         <div class="easy-login">
@@ -39,6 +44,7 @@ <h3>간편 로그인하기</h3>
             판다마켓이 처음이신가요?
             <span><a href="/signup.html">회원가입</a></span>
         </div>
+        <script src="login_valid_check.js"></script>
     </main>
 </body>
 </html>

diff --git a/login_mobile.css b/login_mobile.css
@@ -0,0 +1,43 @@
+@media (max-width : 767px) {
+    body {
+        font-size: 16px;
+        padding: 0 16px;
+    }
+
+    .logo {
+        width: auto;
+    }
+
+    .logo img {
+        margin: 20px auto;
+        height: 66px;
+    }
+
+    form {
+        margin: 16px auto;
+        width: 100%;
+    }
+
+    label {
+        color: #1F2937;
+        display: block;
+        margin: 16px 0 8px;
+        font-size: 14px;
+    }
+
+    input {
+        font-size: 16px;
+        width: 100%;
+    }
+
+    button {
+        width: 100%;
+        height: 56px;
+        font-size: 16px;
+    }
+
+    .easy-login {
+        font-size: 14px;
+    }
+
+}
diff --git a/login_tablet.css b/login_tablet.css
@@ -0,0 +1,38 @@
+@media (max-width : 1199px) {
+    body {
+        font-size: 16px;
+        padding: 0 50px;
+    }
+
+    .logo {
+        width: auto;
+    }
+
+    form {
+        margin: 16px auto;
+        width: 100%;
+    }
+
+    label {
+        color: #1F2937;
+        display: block;
+        margin: 16px 0 8px;
+        font-size: 14px;
+    }
+
+    input {
+        font-size: 16px;
+        width: 100%;
+    }
+
+    button {
+        width: 100%;
+        height: 56px;
+        font-size: 16px;
+    }
+
+    .easy-login {
+        font-size: 14px;
+    }
+
+}
diff --git a/login_valid_check.js b/login_valid_check.js
@@ -0,0 +1,72 @@
+// 아이디 입력창
+const inputEmail = document.querySelector('#signup-email'); 
+const blankMessage = document.querySelector('.blank-message'); 
+const invalidMessage = document.querySelector('.invalid-message');
+const check = document.querySelector('.check');
+
+// 비밀번호 입력창
+const inputPassword = document.querySelector('#signup-pw');
+const longerMessage = document.querySelector('.longer-message'); 
+const blankMessage3 = document.querySelector('.blank-message3');
+
+//유효성 검사 함수
+
+function pwLength(value) {
+    return value.length >= 8;
+  }
+
+function isEmail(value) {
+  const pattern = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-za-z0-9\-]+/;
+  if (pattern.test(value) === false) { 
+    return false; 
+  } else { return true; }
+}
+
+function emailCheck () {
+  if (inputEmail.value.length == 0) {
+    blankMessage.classList.remove('hide');
+  } else if (isEmail(inputEmail.value) === false) {
+    // 유효한 이메일 형식이 아닐 경우
+        invalidMessage.classList.remove('hide'); 
+        blankMessage.classList.add('hide'); 
+      }
+      // 조건을 모두 만족할 경우
+      else {
+        invalidMessage.classList.add('hide'); 
+        blankMessage.classList.add('hide'); 
+      }
+};
+
+function pwCheck() {
+  // 값을 입력하지 않은 경우
+  if (inputPassword.value.length == 0) {
+    longerMessage.classList.remove('hide');
+    blankMessage3.classList.add('hide'); 
+    } else if (pwLength(inputPassword.value) === false) {
+    // 8자 이상이 아닐 경우
+        longerMessage.classList.remove('hide');
+        blankMessage3.classList.add('hide'); 
+      }
+      // 조건을 모두 만족할 경우
+      else {
+        longerMessage.classList.add('hide'); 
+        blankMessage3.classList.add('hide'); 
+      }
+  }
+
+  inputEmail.addEventListener("focusout", emailCheck);
+  inputPassword.addEventListener("focusout", pwCheck);
+
+
+  const inputValue = document.querySelector('input');
+  const signupButton = document.querySelector('.login-btn');
+  const errorMessage = document.querySelectorAll('.error');
+
+  //입력값을 모두 채웠을 때 + 에러메지시가 뜨지 않을 때 버튼 활성화
+  function activeButton() {
+    if (inputValue.value.length !== 0 && errorMessage.classList.contains('hide') ) {
+      signupButton.classList.add('.button-active');
+    } else {
+      signupButton.classList.add('.button-active');
+    }
+  }
diff --git a/signin.html b/signin.html
diff --git a/signup.css b/signup.css
@@ -1,5 +1,6 @@
 * {
     box-sizing: border-box;
+    word-break: keep-all;
 }
 
 .logo {
@@ -51,7 +52,7 @@ input:focus {
     border: 2px solid #3692FF;
 }
 
-button:focus {
+.button-active {
     background-color: #3692FF;
 }
 
@@ -63,6 +64,22 @@ button:focus {
     background-color: #F3F4F6;
 }
 
+.visibility {
+    background: url('images/visibility.png') no-repeat 5px center;
+    background-position : 97%;
+    background-size: 27px;
+    background-color: #F3F4F6;
+}
+
+.error {
+    color: red;
+    margin-left: 15px;
+    font-size: 14px;
+}
+
+.hide {
+    display: none;
+}
 
 button {
     width: 100%;

diff --git a/signup.html b/signup.html
@@ -6,7 +6,9 @@
     <title>판다마켓 회원가입</title>
     <link rel="stylesheet" href="signup.css">
     <link rel="stylesheet" href="global.css">
-    <link rel="icon" href="images/판다얼굴.png" />
+    <link rel="stylesheet" href="signup_tablet.css">
+    <link rel="stylesheet" href="signup_mobile.css">
+    <link rel="icon" href="images/panda_face.png" />
 </head>
 <body>
     <header>
@@ -19,37 +21,43 @@
             <label for="signup-email">이메일</lable>
             <input id="signup-email" name="email" type="email" 
                 placeholder="이메일을 입력해주세요" required>
+            <div class="error blank-message hide">이메일을 입력해주세요.</div>
+            <div class="error invalid-message hide">잘못된 이메일 형식입니다.</div>    
+
 
 
             <label for="signup-nick">닉네임</lable>
             <input id="signup-nick" name="nick"
                 placeholder="닉네임을 입력해주세요" required>
-
+            <div class="error blank-message2 hide">닉네임을 입력해주세요.</div>  
 
             <label for="signup-pw">비밀번호</lable>
                 <input id="signup-pw" name="pw" type="password" 
                 placeholder="비밀번호를 입력해주세요" required>
-
+            <div class="error blank-message3 hide">비밀번호를 입력해주세요.</div>
+            <div class="error longer-message hide">비밀번호를 8자 이상 입력해주세요.</div>    
 
             <label for="signup-pwcheck">비밀번호 확인</lable>
                 <input id="signup-pwcheck" name="pwcheck" type="password" 
                 placeholder="비밀번호를 다시 한 번 입력해주세요" required>
+            <div class="error mismatch-message hide">비밀번호가 일치하지 않습니다.</div> 
 
             <div class="signup-btn">
-            <a href=#><button>회원가입</button></a>
+            <a href=/signin.html><button>회원가입</button></a>
             </div>
         </form>
         <div class="easy-login">
             <h3>간편 로그인하기</h3>
             <div>
-                <a href="https://www.google.com/"><img rel="icon" src="google.png"></a>
-                <a href="https://www.kakao.com/"><img rel="icon" src="kakao.png"></a>
+                <a href="https://www.google.com/"><img rel="icon" src="/images/google.png"></a>
+                <a href="https://www.kakao.com/"><img rel="icon" src="/images/kakao.png"></a>
             </div>
         </div>
         <div class="already-user">
             이미 회원이신가요?
             <span><a href="/login.html">로그인</a></span>
         </div>
+        <script src="signup_valid_check.js"></script>
     </main>
 </body>
 </html>
diff --git a/signup_mobile.css b/signup_mobile.css
@@ -0,0 +1,43 @@
+@media (max-width : 767px) {
+    body {
+        font-size: 16px;
+        padding: 0 16px;
+    }
+
+    .logo {
+        width: auto;
+    }
+
+    .logo img {
+        margin: 20px auto;
+        height: 66px;
+    }
+
+    form {
+        margin: 16px auto;
+        width: 100%;
+    }
+
+    label {
+        color: #1F2937;
+        display: block;
+        margin: 16px 0 8px;
+        font-size: 14px;
+    }
+
+    input {
+        font-size: 16px;
+        width: 100%;
+    }
+
+    button {
+        width: 100%;
+        height: 56px;
+        font-size: 16px;
+    }
+
+    .easy-login {
+        font-size: 14px;
+    }
+
+}