codeit-bootcamp-frontend · Yun-Jinwoo · Feb 21, 2025 · Feb 21, 2025 · Feb 21, 2025 · Feb 21, 2025
diff --git a/faq.html b/faq.html
diff --git a/img/favicon.ico b/img/favicon.ico
diff --git a/img/home/facebook-icon.png b/img/home/facebook-icon.png
diff --git a/img/home/instagram-icon.png b/img/home/instagram-icon.png
diff --git a/img/home/main-img-1.png b/img/home/main-img-1.png
diff --git a/img/home/main-img-2.png b/img/home/main-img-2.png
diff --git a/img/home/main-img-3.png b/img/home/main-img-3.png
diff --git a/img/home/panda-image-bottom.png b/img/home/panda-image-bottom.png
diff --git a/img/home/panda-image-top.png b/img/home/panda-image-top.png
diff --git a/img/home/twitter-icon.png b/img/home/twitter-icon.png
diff --git a/img/home/youtube-icon.png b/img/home/youtube-icon.png
diff --git a/img/login/btn_visibility_off.png b/img/login/btn_visibility_off.png
diff --git a/img/login/btn_visibility_on.png b/img/login/btn_visibility_on.png
diff --git a/img/login/google_logo.png b/img/login/google_logo.png
diff --git a/img/login/kakao_logo.png b/img/login/kakao_logo.png
diff --git a/img/logo.png b/img/logo.png
diff --git a/img/text-logo.png b/img/text-logo.png
diff --git a/index.html b/index.html
@@ -0,0 +1,186 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      as="style"
+      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" />
+    <!-- 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>
+    <header>
+      <nav>
+        <a href="/" class="logo">
+          <picture>
+            <source srcset="img/text-logo.png" media="(max-width: 767px)" />
+            <img class="logo" src="img/logo.png" alt="판다마켓 로고 이미지" />
+          </picture>
+        </a>
+        <a href="/login.html" class="login-link">로그인</a>
+      </nav>
+    </header>
+
+    <main>
+      <section class="top-section">
+        <div class="top-section-container">
+          <div class="top-section-text">
+            <p>
+              일상의 모든 물건을
+              <br />
+              거래해 보세요
+            </p>
+            <a href="/items.html">구경하러 가기</a>
+          </div>
+          <img
+            src="img/home/panda-image-top.png"
+            alt="귀여운 판다 한마리가 서있는 이미지"
+          />
+        </div>
+      </section>
+      <section class="main-section">
+        <div class="hot-item">
+          <img
+            src="img/home/main-img-1.png"
+            alt="인기 있는 옷을 바라보는 판다 두마리의 뒷모습"
+            class="hot-item-img"
+          />
+          <div class="text-container">
+            <div class="small-text">Hot item</div>
+            <div class="big-text">
+              인기 상품을
+              <br />
+              확인해 보세요
+            </div>
+            <p>
+              가장 HOT한 중고거래 물품을
+              <br />
+              판다 마켓에서 확인해 보세요
+            </p>
+          </div>
+        </div>
+      </section>
+      <section class="main-section">
+        <div class="search">
+          <div class="text-container">
+            <div class="small-text">Search</div>
+            <div class="big-text">
+              구매를 원하는
+              <br />
+              상품을 검색하세요
+            </div>
+            <p>
+              구매하고 싶은 물품은 검색해서
+              <br />
+              쉽게 찾아보세요
+            </p>
+          </div>
+          <img
+            src="img/home/main-img-2.png"
+            alt="원하는 상품을 검색하는 이미지"
+            class="search-img"
+          />
+        </div>
+      </section>
+      <section class="main-section">
+        <div class="register">
+          <img
+            src="img/home/main-img-3.png"
+            alt="연필, 필통, 도서, 안경 같은 물건을 등록하는 이미지"
+            class="register-img"
+          />
+          <div class="text-container">
+            <div class="small-text">Register</div>
+            <div class="big-text">
+              판매를 원하는
+              <br />
+              상품을 등록하세요
+            </div>
+            <p>
+              어떤 물건이든 판매하고 싶은 상품을
+              <br />
+              쉽게 등록하세요
+            </p>
+          </div>
+        </div>
+      </section>
+      <section class="bottom-section">
+        <div class="bottom-section-container">
+          <div class="bottom-section-text">
+            <p>
+              믿을 수 있는
+              <br />
+              판다마켓 중고 거래
+            </p>
+          </div>
+          <img
+            src="img/home/panda-image-bottom.png"
+            alt="귀여운 판다 두마리가 중고 거래하는 이미지"
+          />
+        </div>
+      </section>
+    </main>
+
+    <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>
+      </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>
+      </div>
+    </footer>
+  </body>
+</html>
diff --git a/items.html b/items.html
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));
+});