[김원선]sprint4

css/login.css

@@ -46,26 +46,28 @@ body {
   line-height: 1.4;
 }
 
-.iogin_title {
+.login_title {
   margin: 0 0 16px;
 }
 
-.login_input_field::placeholder {
+.input_field::placeholder {
   font-family: Pretendard, sans-serif;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.6;
 }
 
-.login_input_field {
+.input_field {
   width: 100%;
   background: var(--gray100);
+  font: 400 1rem;
+  color: var(--Secondary800);
   padding: 16px 24px;
   border: 0;
   border-radius: 12px;
 }
 
-.login_input_field:focus {
+.input_field:focus {
   outline: none;
 }
 
@@ -82,17 +84,22 @@ body {
   transform: translateY(-50%);
 }
 
-.ic_eyes {
+.password_toggle {
   display: inline-block;
   width: 100%;
   height: 100%;
-  background-image: url(../icon/ic_passwrod_hide.svg);
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-size: cover;
+  background-color: transparent;
   border: none;
 }
 
+.error_msg {
+  margin: 8px 0 0 16px;
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.5;
+  color: var(--errorMsg);
+}
+
 .connection_info {
   text-align: center;
 }
@@ -105,10 +112,15 @@ body {
   font-weight: 600;
   color: var(--gray100);
   line-height: 2;
-  background: var(--Secondary400);
+  background: var(--blue);
+  border: none;
   border-radius: 40px;
 }
 
+.connection_button:disabled {
+  background: var(--Secondary400);
+}
+
 .simple_login {
   display: flex;
   justify-content: space-between;
@@ -153,13 +165,6 @@ body {
   color: var(--blue);
 }
 
-/* Tablet */
-@media (min-width: 768px) and (max-width: 1200px) {
-  .connection_button {
-    background: var(--Secondary400);
-  }
-}
-
 /* Mobile */
 @media (min-width: 375px) and (max-width: 767px) {
   .container {
@@ -189,11 +194,11 @@ body {
     font-size: 0.875rem;
   }
 
-  .iogin_title {
+  .login_title {
     margin: 0 0 8px;
   }
 
-  .login_input_field {
+  .input_field {
     width: 100%;
     background: var(--gray100);
     padding: 16px 24px;

css/palette.css

@@ -1,5 +1,7 @@
 :root {
   --blue: #3692ff;
+  --Secondary400: #9ca3af;
+  --Secondary800: #1f2937;
   --gray900: #111827;
   --gray800: #1f2937;
   --gray700: #374151;
@@ -14,6 +16,6 @@
 :root {
   --white: #ffffff;
   --black: #111111;
-  --Secondary400: #9ca3af;
   --skyblue: #e6f2ff;
+  --errorMsg: #f74747;
 }

css/reset.css

@@ -88,3 +88,9 @@ acronym {
 a {
   text-decoration: none;
 }
+
+button {
+  cursor: pointer;
+  border: none;
+  background-color: transparent;
+}

css/signup.css

@@ -9,7 +9,7 @@ body {
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  height: 100vh;
+  height: 100%;
   background: var(--white);
 }
 
@@ -50,22 +50,24 @@ body {
   margin: 0 0 16px;
 }
 
-.sign_input_field::placeholder {
+.input_field::placeholder {
   font-family: Pretendard, sans-serif;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.6;
 }
 
-.sign_input_field {
+.input_field {
   width: 100%;
   background: var(--gray100);
+  font: 400 1rem;
+  color: var(--Secondary800);
   padding: 16px 24px;
   border: 0;
   border-radius: 12px;
 }
 
-.sign_input_field:focus {
+.input_field:focus {
   outline: none;
 }
 
@@ -82,25 +84,18 @@ body {
   transform: translateY(-50%);
 }
 
-.ic_eyes {
+.password_toggle {
   display: inline-block;
   width: 100%;
   height: 100%;
-  border: none;
-}
-
-.hide {
-  background-image: url(../icon/ic_passwrod_hide.svg);
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-size: cover;
 }
 
-.open {
-  background-image: url(../icon/ic_passwrod_open.svg);
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-size: cover;
+.error_msg {
+  margin: 8px 0 0 16px;
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.5;
+  color: var(--errorMsg);
 }
 
 .connection {
@@ -115,10 +110,14 @@ body {
   font-weight: 600;
   color: var(--gray100);
   line-height: 2;
-  background: var(--Secondary400);
+  background: var(--blue);
   border-radius: 40px;
 }
 
+.connection_button:disabled {
+  background: var(--Secondary400);
+}
+
 .simple_login {
   display: flex;
   justify-content: space-between;
@@ -199,12 +198,4 @@ body {
   .sign_title {
     margin: 0 0 8px;
   }
-
-  /* open 이미지 hide로 변겨 */
-  .open {
-    background-image: url(../icon/ic_passwrod_hide.svg);
-    background-repeat: no-repeat;
-    background-position: center center;
-    background-size: cover;
-  }
 }

index.html

@@ -6,15 +6,14 @@
     <title>판다마켓</title>
     <meta property="og:title" content="판다마켓" />
     <meta property="og:description" content="일상의 모든 물건을 거래해보세요" />
-    <meta property="og:image" content="./image/Landing_Page_img" />
-    <meta property="og:url" content="pandamakert.netlify.app" />
+    <meta property="og:image" content="/image/Landing_Page_img.png" />
+    <meta property="og:url" content="http://pandamakert.netlify.app" />
     <link rel="stylesheet" href="css/style.css" />
     <link rel="stylesheet" href="css/reset.css" />
     <link
       rel="stylesheet"
       type="text/css"
-      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"
-    />
+      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" />
   </head>
   <body>
     <!-- Header -->

js/login.js

@@ -0,0 +1,88 @@
+import {
+  form,
+  userEmail,
+  userPassword,
+  submitButton,
+  emailErrorMsg,
+  pwErrorMsg,
+  pwToggle,
+  errMsg,
+  changeImg,
+} from "./shared_variable.js";
+
+form.addEventListener("submit", (e) => {
+  e.preventDefault();
+  window.location.href = "/item";
+});
+
+// error messsage show
+function showError(inputEle, errorEle, message) {
+  inputEle.style.border = "1px solid #f74747";
+  errorEle.innerHTML = message;
+  errorEle.style.display = "block";
+}
+
+// error message hide
+function hideError(inputEle, errorEle) {
+  inputEle.style.border = "none";
+  errorEle.style.display = "none";
+}
+
+// 이메일 focusout
+userEmail.addEventListener("focusout", () => {
+  if (userEmail.value === "") {
+    showError(userEmail, emailErrorMsg, errMsg.id.voidOut.trim());
+  } else if (!emailCheck(userEmail.value)) {
+    showError(userEmail, emailErrorMsg, errMsg.id.fail.trim());
+  } else {
+    hideError(userEmail, emailErrorMsg);
+  }
+  activeButton();
+});
+
+// 이메일 정규 표현식 체크
+function emailCheck(value) {
+  const emailRegex =
+    /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;
+
+  return emailRegex.test(value);
+}
+
+// 비밀번호 focusout
+userPassword.addEventListener("focusout", () => {
+  if (userPassword.value.length === 0) {
+    showError(userPassword, pwErrorMsg, errMsg.pw.voidOut.trim());
+  } else if (userPassword.value.length < 8) {
+    showError(userPassword, pwErrorMsg, errMsg.pw.fail.trim());
+  } else {
+    hideError(userPassword, pwErrorMsg);
+  }
+  activeButton();
+});
+
+// 버튼 활성화
+function activeButton() {
+  if (emailCheck(userEmail.value) && userPassword.value.length >= 8) {
+    submitButton.disabled = false;
+  } else {
+    submitButton.disabled = true;
+  }
+}
+
+// 비밀번호 보기
+pwToggle.forEach((button) => {
+  button.addEventListener("click", (target) => {
+    const clickBtn = target.currentTarget;
+    const parentEle = clickBtn.closest(".flex_item");
+    const targetInput = parentEle.querySelector(".input_field");
+    const img = clickBtn.querySelector(".pw-icon");
+
+    if (targetInput.type === "password") {
+      targetInput.type = "text";
+      img.src = changeImg.show;
+    } else {
+      targetInput.type = "password";
+      img.src = changeImg.hide;
+    }
+  });
+});

js/shared_variable.js

@@ -0,0 +1,27 @@
+export const form = document.querySelector(".form_contorl");
+export const userEmail = document.querySelector("#user_email");
+export const userPassword = document.querySelector("#user_password");
+export const submitButton = document.querySelector(".connection_button");
+export const emailErrorMsg = document.querySelector(".info_email .error_msg");
+export const pwErrorMsg = document.querySelector(".info_password .error_msg");
+export const pwToggle = document.querySelectorAll(".password_toggle");
+
+export const errMsg = {
+  id: {
+    voidOut: "이메일을 입력해주세요.",
+    fail: "잘못된 이메일 형식입니다.",
+  },
+  name: {
+    fail: "닉네임을 입력해주세요.",
+  },
+  pw: {
+    voidOut: "비밀번호를 입력해주세요.",
+    fail: "비밀번호를 8자 이상 입력해주세요.",
+  },
+  rePw: "비밀번호가 일치하지 않습니다.",
+};
+
+export const changeImg = {
+  hide: "./icon/ic_passwrod_hide.svg",
+  show: "./icon/ic_passwrod_open.svg",
+};