codeit-bootcamp-frontend · Yun-Jinwoo · Mar 19, 2025 · Mar 19, 2025 · Mar 19, 2025 · Mar 19, 2025
diff --git a/img/favicon.ico b/img/favicon.ico
diff --git a/index.html b/index.html
@@ -9,11 +9,43 @@
       crossorigin
       href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css"
     />
+    <link rel="icon" href="img/favicon.ico" type="image/x-icon" />
     <link rel="stylesheet" href="/style/reset.css" />
     <link rel="stylesheet" href="/style/base.css" />
     <link rel="stylesheet" href="/style/home.css" />
     <link rel="stylesheet" href="/style/home_media.css" />
-    <title>판다마켓</title>
+    <!-- HTML Meta Tags -->
+    <title>판다 마켓</title>
+    <meta name="description" content="일상의 모든 물건을 거래해보세요" />
+
+    <!-- Facebook Meta Tags -->
+    <meta property="og:url" content="https://jinwoo-sprint3.netlify.app.com" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="판다 마켓" />
+    <meta property="og:description" content="일상의 모든 물건을 거래해보세요" />
+    <meta
+      property="og:image"
+      content="https://opengraph.b-cdn.net/production/images/f331e6c8-51bf-4b4d-8a6d-7a8b1821ab74.jpg?token=EdcETvnVENK1yWIDZdwdSwIsoFp7dAean_BG_EyCWtg&height=612&width=612&expires=33278366876"
+    />
+
+    <!-- Twitter Meta Tags -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta property="twitter:domain" content="jinwoo-sprint3.netlify.app.com" />
+    <meta
+      property="twitter:url"
+      content="https://jinwoo-sprint3.netlify.app.com"
+    />
+    <meta name="twitter:title" content="판다 마켓" />
+    <meta
+      name="twitter:description"
+      content="일상의 모든 물건을 거래해보세요"
+    />
+    <meta
+      name="twitter:image"
+      content="https://opengraph.b-cdn.net/production/images/f331e6c8-51bf-4b4d-8a6d-7a8b1821ab74.jpg?token=EdcETvnVENK1yWIDZdwdSwIsoFp7dAean_BG_EyCWtg&height=612&width=612&expires=33278366876"
+    />
+
+    <!-- Meta Tags Generated via https://www.opengraph.xyz -->
   </head>
 
   <body>
@@ -33,7 +65,11 @@
       <section class="top-section">
         <div class="top-section-container">
           <div class="top-section-text">
-            <p>일상의 모든 물건을 <br />거래해 보세요</p>
+            <p>
+              일상의 모든 물건을
+              <br />
+              거래해 보세요
+            </p>
             <a href="/items.html">구경하러 가기</a>
           </div>
           <img
@@ -52,11 +88,13 @@
           <div class="text-container">
             <div class="small-text">Hot item</div>
             <div class="big-text">
-              인기 상품을 <br />
+              인기 상품을
+              <br />
               확인해 보세요
             </div>
             <p>
-              가장 HOT한 중고거래 물품을 <br />
+              가장 HOT한 중고거래 물품을
+              <br />
               판다 마켓에서 확인해 보세요
             </p>
           </div>
@@ -67,11 +105,13 @@
           <div class="text-container">
             <div class="small-text">Search</div>
             <div class="big-text">
-              구매를 원하는 <br />
+              구매를 원하는
+              <br />
               상품을 검색하세요
             </div>
             <p>
-              구매하고 싶은 물품은 검색해서 <br />
+              구매하고 싶은 물품은 검색해서
+              <br />
               쉽게 찾아보세요
             </p>
           </div>
@@ -92,11 +132,13 @@
           <div class="text-container">
             <div class="small-text">Register</div>
             <div class="big-text">
-              판매를 원하는 <br />
+              판매를 원하는
+              <br />
               상품을 등록하세요
             </div>
             <p>
-              어떤 물건이든 판매하고 싶은 상품을 <br />
+              어떤 물건이든 판매하고 싶은 상품을
+              <br />
               쉽게 등록하세요
             </p>
           </div>
@@ -106,7 +148,8 @@
         <div class="bottom-section-container">
           <div class="bottom-section-text">
             <p>
-              믿을 수 있는 <br />
+              믿을 수 있는
+              <br />
               판다마켓 중고 거래
             </p>
           </div>
@@ -121,22 +164,22 @@
     <footer>
       <div class="codeit">©codeit - 2024</div>
       <div class="footer-center">
-        <a href="/privacy.html" class="privacy-policy"> Privacy Policy </a>
-        <a href="/faq.html" class="faq"> FAQ </a>
+        <a href="/privacy.html" class="privacy-policy">Privacy Policy</a>
+        <a href="/faq.html" class="faq">FAQ</a>
       </div>
       <div class="footer-right">
-        <a href="https://www.facebook.com" target="_blank"
-          ><img src="img/home/facebook-icon.png" alt="페이스북 로고"
-        /></a>
-        <a href="https://www.twitter.com" target="_blank"
-          ><img src="img/home/twitter-icon.png" alt="트위터 로고"
-        /></a>
-        <a href="https://www.youtube.com" target="_blank"
-          ><img src="img/home/youtube-icon.png" alt="유튜브 로고"
-        /></a>
-        <a href="https://www.instagram.com" target="_blank"
-          ><img src="img/home/instagram-icon.png" alt="인스타그램 로고"
-        /></a>
+        <a href="https://www.facebook.com" target="_blank">
+          <img src="img/home/facebook-icon.png" alt="페이스북 로고" />
+        </a>
+        <a href="https://www.twitter.com" target="_blank">
+          <img src="img/home/twitter-icon.png" alt="트위터 로고" />
+        </a>
+        <a href="https://www.youtube.com" target="_blank">
+          <img src="img/home/youtube-icon.png" alt="유튜브 로고" />
+        </a>
+        <a href="https://www.instagram.com" target="_blank">
+          <img src="img/home/instagram-icon.png" alt="인스타그램 로고" />
+        </a>
       </div>
     </footer>
   </body>

diff --git a/js/common.js b/js/common.js
@@ -0,0 +1,46 @@
+/* 에러 메시지 처리 */
+function wrongInput(input, span, validateFunction) {
+  const errorMessage = validateFunction(input);
+  if (errorMessage) {
+    input.classList.add("warning");
+    input.classList.remove("done");
+    span.textContent = errorMessage;
+  } else {
+    input.classList.remove("warning");
+    input.classList.add("done");
+    span.textContent = "";
+  }
+  input.parentElement.appendChild(span);
+  if (span.textContent === "") {
+    input.parentElement.removeChild(span);
+  }
+}
+
+/* 눈모양 버튼 클릭시 비밀번호 보이기 / 가리기 */
+function togglePasswordVisibility(button) {
+  const passwordInput = button.previousElementSibling;
+  if (passwordInput.type === "password") {
+    passwordInput.type = "text";
+    button.classList.add("visible");
+  } else {
+    passwordInput.type = "password";
+    button.classList.remove("visible");
+  }
+}
+
+/* inputs에 모두 done 클래스가 있다면 버튼 활성화 */
+function activateButton(button, inputs) {
+  if (inputs.every((input) => input.classList.contains("done"))) {
+    button.disabled = false;
+  } else {
+    button.disabled = true;
+  }
+}
+
+// 버튼 클릭시 특정 페이지로 이동
+function redirectToPage(event, redirectUrl) {
+  event.preventDefault();
+  window.location.href = redirectUrl;
+}
+
+export { wrongInput, togglePasswordVisibility, activateButton, redirectToPage };
diff --git a/js/login.js b/js/login.js
@@ -0,0 +1,76 @@
+import {
+  wrongInput,
+  togglePasswordVisibility,
+  activateButton,
+  redirectToPage,
+} from "./common.js";
+
+const emailInput = document.querySelector("#input-email");
+const passwordInput = document.querySelector("#input-password");
+const loginButton = document.querySelector(".login-page .submit-button");
+const loginForm = document.querySelector(".login-page .form-container");
+
+const wrongEmail = document.createElement("span");
+const wrongPassword = document.createElement("span");
+
+const inputArray = [emailInput, passwordInput];
+
+wrongEmail.classList.add("error-message");
+wrongPassword.classList.add("error-message");
+
+loginButton.disabled = true;
+
+function validateEmail(input) {
+  if (input.value === "") {
+    return "이메일을 입력해주세요.";
+  } else if (!input.checkValidity()) {
+    return "잘못된 이메일 형식입니다.";
+  }
+}
+
+function validatePassword(input) {
+  if (input.value === "") {
+    return "비밀번호를 입력해주세요.";
+  } else if (input.value.length < 8) {
+    return "비밀번호를 8자 이상 입력해주세요.";
+  }
+}
+
+/* email 에러 메시지 처리 */
+emailInput.addEventListener("focusout", () =>
+  wrongInput(emailInput, wrongEmail, validateEmail)
+);
+emailInput.addEventListener("input", () =>
+  wrongInput(emailInput, wrongEmail, validateEmail)
+);
+
+/* password 에러 메시지 처리 */
+passwordInput.addEventListener("focusout", () =>
+  wrongInput(passwordInput, wrongPassword, validatePassword)
+);
+passwordInput.addEventListener("input", () =>
+  wrongInput(passwordInput, wrongPassword, validatePassword)
+);
+
+/* email, password에 유효한 값이 입력되면 로그인 페이지 버튼 활성화 */
+inputArray.forEach((input) => {
+  input.addEventListener("input", () =>
+    activateButton(loginButton, inputArray)
+  );
+});
+
+inputArray.forEach((input) => {
+  input.addEventListener("focusout", () =>
+    activateButton(loginButton, inputArray)
+  );
+});
+
+/* 로그인 버튼 클릭시 items 페이지로 이동 */
+loginForm.addEventListener("submit", (event) =>
+  redirectToPage(event, "/items.html")
+);
+
+/* 눈모양 버튼 클릭시 */
+document.querySelectorAll(".visibility").forEach((button) => {
+  button.addEventListener("click", () => togglePasswordVisibility(button));
+});