codeit-bootcamp-frontend · devym-37 · Sep 25, 2024 · Sep 16, 2024 · Sep 17, 2024 · Sep 17, 2024
diff --git a/auth.js b/auth.js
@@ -0,0 +1,53 @@
+// 각 입력 요소를 찾기 위한 변수를 선언
+const emailInput = document.getElementById("email");
+const nicknameInput = document.getElementById("nickname"); // 로그인 페이지에서는 존재하지 않을 수 있음
+const passwordInput = document.getElementById("password");
+const passwordConfirmInput = document.getElementById("passwordConfirm"); // 로그인 페이지에서는 존재하지 않을 수 있음
+const loginButton = document.getElementById("loginButton");
+
+// 로그인 페이지인지 회원가입 페이지인지 확인
+if (nicknameInput && passwordConfirmInput) {
+  // 회원가입 페이지일 때
+  function validateSignUpInputs() {
+    const emailValue = emailInput.value.trim();
+    const nicknameValue = nicknameInput.value.trim();
+    const passwordValue = passwordInput.value.trim();
+    const passwordConfirmValue = passwordConfirmInput.value.trim();
+
+    if (
+      emailValue !== "" &&
+      nicknameValue !== "" &&
+      passwordValue !== "" &&
+      passwordConfirmValue !== "" &&
+      passwordValue === passwordConfirmValue
+    ) {
+      loginButton.disabled = false;
+      loginButton.classList.add("active");
+    } else {
+      loginButton.disabled = true;
+      loginButton.classList.remove("active");
+    }
+  }
+
+  emailInput.addEventListener("input", validateSignUpInputs);
+  nicknameInput.addEventListener("input", validateSignUpInputs);
+  passwordInput.addEventListener("input", validateSignUpInputs);
+  passwordConfirmInput.addEventListener("input", validateSignUpInputs);
+} else {
+  // 로그인 페이지일 때
+  function validateLoginInputs() {
+    const emailValue = emailInput.value.trim();
+    const passwordValue = passwordInput.value.trim();
+
+    if (emailValue !== "" && passwordValue !== "") {
+      loginButton.disabled = false;
+      loginButton.classList.add("active");
+    } else {
+      loginButton.disabled = true;
+      loginButton.classList.remove("active");
+    }
+  }
+
+  emailInput.addEventListener("input", validateLoginInputs);
+  passwordInput.addEventListener("input", validateLoginInputs);
+}
diff --git a/font/Pretendard-Bold.otf b/font/Pretendard-Bold.otf
diff --git a/font/Pretendard-Medium.otf b/font/Pretendard-Medium.otf
diff --git a/font/Pretendard-Regular.otf b/font/Pretendard-Regular.otf
diff --git a/font/Pretendard-SemiBold.otf b/font/Pretendard-SemiBold.otf
diff --git a/font/ROKAF_Sans_Bold.ttf b/font/ROKAF_Sans_Bold.ttf
diff --git a/font/ROKAF_Sans_Medium.ttf b/font/ROKAF_Sans_Medium.ttf
diff --git a/img/Img_home_bottom.png b/img/Img_home_bottom.png
diff --git a/img/Img_home_top.png b/img/Img_home_top.png
diff --git a/img/auth_logo.png b/img/auth_logo.png
diff --git a/img/ic_facebook.png b/img/ic_facebook.png
diff --git a/img/ic_google.png b/img/ic_google.png
diff --git a/img/ic_instagram.png b/img/ic_instagram.png
diff --git a/img/ic_kakao.png b/img/ic_kakao.png
diff --git a/img/ic_password0.svg b/img/ic_password0.svg
diff --git a/img/ic_password1.svg b/img/ic_password1.svg
diff --git a/img/ic_twitter.png b/img/ic_twitter.png
diff --git a/img/ic_youtube.png b/img/ic_youtube.png
diff --git a/img/main_1.jpg b/img/main_1.jpg
diff --git a/img/main_2.jpg b/img/main_2.jpg
diff --git a/img/main_3.jpg b/img/main_3.jpg
diff --git a/img/og_title.jpg b/img/og_title.jpg
diff --git a/img/pandalogo.jpg b/img/pandalogo.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>판다마켓</title>
+  <link rel="stylesheet" href="/style/style.css">
+  <meta property="og:title" content="판다마켓" />
+  <meta property="og:description" content="일상의 모든 물건을 거래해 보세요" />
+  <meta property="og:image" content="/img/og_title.jpg" />
+  <meta property="og:type" content="website" />
+</head>
+
+<body>
+  <div id="layout">
+    <!-- 상단바 -->
+    <header class="nav_wrapper">
+      <nav class="nav_bar">
+        <div class="nav_logobox">
+          <a href="/"><img src="/img/pandalogo.jpg" alt=""></a>
+          <a href="/">
+            <h1 class="nav_title">판다마켓</h1>
+          </a>
+        </div>
+        <div class="nav_btnbox">
+          <a href="/pages/login.html"><button class="nav_loginbtn">로그인</button></a>
+        </div>
+      </nav>
+    </header>
+    <main class="main_wrapper">
+      <!-- 배너부분 -->
+      <div class="main_banner">
+        <div class="banner_box">
+          <div class="banner_title_box">
+            <h2 class="banner_title">일상의 모든 물건을<br> 거래해 보세요</h2>
+            <a href="/pages/items.html"><button class="banner_btn">구경하러 가기</button></a>
+          </div>
+          <div>
+            <img src="/img/Img_home_top.png" alt="배너이미지">
+          </div>
+        </div>
+      </div>
+      <!-- 가운데 내용물 -->
+      <section class="main_section">
+        <div class="hotitem_section">
+          <div class="hotitem_box">
+            <div><img src="/img/main_1.jpg" alt=""></div>
+            <div class="hotitem_textbox">
+              <span>Hot item</span>
+              <h2>인기 상품을<br> 확인해 보세요</h2>
+              <p>가장 HOT한 중고거래 물품을<br>판다 마켓에서 확인해 보세요</p>
+            </div>
+          </div>
+        </div>
+        <div class="search_section">
+          <div class="search_box">
+            <div class="search_textbox">
+              <span>Search</span>
+              <h2 class="search_h2">구매를 원하는<br>상품을 검색하세요</h2>
+              <p>구매하고 싶은 물품은 검색해서<br>쉽게 찾아보세요</p>
+            </div>
+            <div><img src="/img/main_2.jpg" alt=""></div>
+          </div>
+        </div>
+        <div class="register_section">
+          <div class="register_box">
+            <div><img src="/img/main_3.jpg" alt=""></div>
+            <div class="register_textbox">
+              <span>Register</span>
+              <h2>판매를 원하는<br>상품을 등록하세요</h2>
+              <p>어떤 물건이든 판매하고 싶은 상품을<br>쉽게 등록하세요</p>
+            </div>
+          </div>
+      </section>
+      <section class="bottom_section">
+        <div class="bottom_box">
+          <div class="bottom_textbox">
+            <h2>믿을 수 있는<br>판다마켓 중고 거래</h2>
+          </div>
+          <div><img src="/img/Img_home_bottom.png" alt=""></div>
+        </div>
+      </section>
+    </main>
+    <!-- 푸터부분 -->
+    <footer>
+      <div class="main_footer">
+        <div class="footer_copy">
+          <p>&copy; codeit - 2024</p>
+        </div>
+        <div class="footer_links">
+          <a href="/pages/privacy.html">Privacy Policy</a>
+          <a href="/pages/faq.html">FAQ</a>
+        </div>
+        <div class="footer_social">
+          <a href="https://www.facebook.com/" target="_blank" rel="noopener noreferrer"><img src="/img/ic_facebook.png"
+              alt="페이스북"></a>
+          <a href="https://twitter.com" target="_blank" rel="noopener noreferrer"><img src="/img/ic_twitter.png"
+              alt="트위터"></a>
+          <a href="https://www.youtube.com" target="_blank" rel="noopener noreferrer"><img src="/img/ic_youtube.png"
+              alt="유튜브"></a>
+          <a href="https://www.instagram.com" target="_blank" rel="noopener noreferrer"><img src="/img/ic_instagram.png"
+              alt="인스타"></a>
+        </div>
+      </div>
+    </footer>
+  </div>
+  <script src="/index.js"></script>
+</body>
+
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,22 @@
+//메인페이지
+function updateLineBreak() {
+  const bannerTitle = document.querySelector(".banner_title");
+  const screenWidth = window.innerWidth;
+
+  if (screenWidth >= 768 && screenWidth <= 1199) {
+    bannerTitle.innerHTML = "일상의 모든 물건을 거래해 보세요"; // 태블릿 모드에서 <br> 제거
+  } else {
+    bannerTitle.innerHTML = "일상의 모든 물건을<br> 거래해 보세요"; // 다른 모드에서는 <br> 유지
+  }
+}
+// 화면 크기가 변경될 때마다 실행
+window.addEventListener("resize", updateLineBreak);
+// 페이지 로드 시 처음 한 번 실행
+window.addEventListener("load", updateLineBreak);
+
+//로그인, 회원가입 페이지
+const emailInput = document.getElementById("email");
+const passwordInput = document.querySelector('input[type="password"]');
+const loginButton = document.querySelector(".form_btn");
+const nicknameInput = document.getElementById("nickname");
+const passwordConfirmInput = document.getElementById("passwordConfirm");
diff --git a/pages/faq.html b/pages/faq.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+
+<body>
+
+</body>
+
+</html>
diff --git a/pages/items.html b/pages/items.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+
+<body>
+
+</body>
+
+</html>
diff --git a/pages/login.html b/pages/login.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>판다마켓 : 로그인</title>
+  <link rel="stylesheet" href="/style/style.css">
+</head>
+
+<body>
+  <div class="auth_wrapper">
+    <div class="auth_container">
+      <div class="auth_titlegroup">
+        <a href="/"><img src="/img/auth_logo.png" alt=""></a>
+        <a href="/" class="auth_title">
+          <h1>판다마켓</h1>
+        </a>
+      </div>
+      <form action="" class="auth_form">
+        <div class="form_group">
+          <label for="email">이메일</label>
+          <input type="text" id="email" placeholder="이메일을 입력해주세요">
+        </div>
+        <div class="form_group">
+          <label for="password">비밀번호</label>
+          <div class="password_wrapper">
+            <input type="password" id="password" placeholder="비밀번호를 입력해주세요">
+            <img src="/img/ic_password0.svg" class="password_toggle" alt="">
+          </div>
+        </div>
+        <button class="form_btn" disabled>로그인</button>
+        <div class="social_group">
+          <p>간편 로그인하기</p>
+          <div class="social_icon">
+            <a href=""><img src="/img/ic_google.png" alt=""></a>
+            <a href=""><img src="/img/ic_kakao.png" alt=""></a>
+          </div>
+        </div>
+        <div class="auth_options">
+          <p>판다마켓이 처음이신가요?</p>
+          <a href="/pages/signup.html">회원가입</a>
+        </div>
+      </form>
+    </div>
+  </div>
+  <script src="/auth.js"></script>
+</body>
+
+</html>
diff --git a/pages/privacy.html b/pages/privacy.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+
+<body>
+
+</body>
+
+</html>
diff --git a/pages/signup.html b/pages/signup.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>판다마켓 : 회원가입</title>
+  <link rel="stylesheet" href="/style/style.css">
+</head>
+
+<body>
+  <div class="auth_wrapper">
+    <div class="auth_container">
+      <div class="auth_titlegroup">
+        <a href="/"><img src="/img/auth_logo.png" alt=""></a>
+        <a href="/" class="auth_title">
+          <h1>판다마켓</h1>
+        </a>
+      </div>
+      <form action="" class="auth_form">
+        <div class="form_group">
+          <label for="email">이메일</label>
+          <input type="text" id="email" placeholder="이메일을 입력해주세요">
+        </div>
+        <div class="form_group">
+          <label for="nickname">닉네임</label>
+          <input type="text" id="nickname" placeholder="닉네임을 입력해주세요">
+        </div>
+        <div class="form_group">
+          <label for="password">비밀번호</label>
+          <div class="password_wrapper">
+            <input type="password" id="password" placeholder="비밀번호를 입력해주세요">
+            <img src="/img/ic_password0.svg" class="password_toggle" alt="">
+          </div>
+        </div>
+        <div class="form_group">
+          <label for="passwordConfirm">비밀번호 확인</label>
+          <div class="password_wrapper">
+            <input type="password" id="passwordConfirm" placeholder="비밀번호를 다시 한 번 입력해주세요">
+            <img src="/img/ic_password0.svg" class="password_toggle" alt="">
+          </div>
+        </div>
+        <button class="form_btn" disabled>회원가입</button>
+        <div class="social_group">
+          <p>간편 로그인하기</p>
+          <div class="social_icon">
+            <a href=""><img src="/img/ic_google.png" alt=""></a>
+            <a href=""><img src="/img/ic_kakao.png" alt=""></a>
+          </div>
+        </div>
+        <div class="auth_options">
+          <p>이미 회원아신가요?</p>
+          <a href="/pages/login.html">로그인</a>
+        </div>
+      </form>
+    </div>
+  </div>
+  <script src="/auth.js"></script>
+</body>
+
+</html>