스프린트미션 1차 산출물

codeit-bootcamp-frontend · Aug 10, 2024 · 8d3c5ac · 8d3c5ac
1 parent 4dc5dd0
commit 8d3c5ac
Show file tree

Hide file tree

Showing 15 changed files with 406 additions and 0 deletions.
diff --git a/img/Group 19.png b/img/Group 19.png
diff --git a/img/Img_home_01.png b/img/Img_home_01.png
diff --git a/img/Img_home_02.png b/img/Img_home_02.png
diff --git a/img/Img_home_03.png b/img/Img_home_03.png
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/ic_facebook.png b/img/ic_facebook.png
diff --git a/img/ic_instagram.png b/img/ic_instagram.png
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/index.html b/index.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="ko">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>판다마켓</title>
+
+  <!-- 외부 스타일 시트 연결 -->
+  <link rel="stylesheet" href="./style.css">
+
+
+</head>
+
+<body class="desktop">
+
+  <!-- header start -->
+  <header class="gnb">
+    <div class="frame_2609410_gnb">
+      <div class="group_19">
+        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="41" viewBox="0 0 40 41" fill="none">
+          <rect y="0.516846" width="40" height="40.1354" rx="11.1782" fill="#3692FF" />
+          <path
+            d="M19.3141 11.6915C19.8134 13.4169 18.4932 15.3183 16.9799 15.7591C15.4666 16.2 13.3991 15.2856 12.8998 13.5601C12.4005 11.8346 13.4487 9.44388 14.962 9.003C16.9799 8.41513 18.8148 9.96597 19.3141 11.6915Z"
+            fill="#222327" />
+          <path
+            d="M20.1463 11.6915C19.647 13.4169 20.9673 15.3183 22.4806 15.7591C23.9939 16.2 26.0613 15.2856 26.5606 13.5601C27.0599 11.8346 26.0117 9.44388 24.4984 9.003C22.4806 8.41513 20.6456 9.96597 20.1463 11.6915Z"
+            fill="#222327" />
+          <path
+            d="M29.5167 24.2966C29.5167 28.6854 25.2133 30.3168 19.3432 30.3168C13.4731 30.3168 9.26709 28.6854 9.26709 24.2966C9.26709 19.1915 13.4731 14.6643 19.3432 14.6643C25.2133 14.6643 29.5167 18.8062 29.5167 24.2966Z"
+            fill="#F3D6DD" />
+          <path
+            d="M17.4003 23.4301C17.4003 24.8675 16.4777 26.4444 15.1884 26.4444C13.8991 26.4444 11.8164 25.2732 11.8164 23.126C11.8164 21.109 14.0664 20.3916 16.3913 20.7599C17.8163 20.9857 17.4003 21.9927 17.4003 23.4301Z"
+            fill="#222327" />
+          <path
+            d="M16.3219 23.285C16.3219 23.5007 16.2571 23.6754 15.9328 23.6754C15.6086 23.6754 15.5438 23.5007 15.5438 23.285C15.5438 23.0694 15.6735 22.8947 15.9328 22.8947C16.1922 22.8947 16.3219 23.0694 16.3219 23.285Z"
+            fill="white" />
+          <path
+            d="M21.3222 23.4301C21.3222 24.8675 22.2448 26.4444 23.5341 26.4444C24.8233 26.4444 26.9061 25.2732 26.9061 23.126C26.9061 21.109 24.6561 20.3916 22.3312 20.7599C20.9062 20.9857 21.3222 21.9927 21.3222 23.4301Z"
+            fill="#222327" />
+          <path
+            d="M22.4015 23.2852C22.4015 23.5008 22.4664 23.6756 22.7906 23.6756C23.1148 23.6756 23.1797 23.5008 23.1797 23.2852C23.1797 23.0696 23.05 22.8948 22.7906 22.8948C22.5312 22.8948 22.4015 23.0696 22.4015 23.2852Z"
+            fill="white" />
+          <path
+            d="M17.875 25.5098C17.7964 25.3952 17.6399 25.366 17.5253 25.4445C17.4107 25.523 17.3815 25.6795 17.46 25.7941L17.875 25.5098ZM19.3174 25.2004L19.5554 25.1189C19.5205 25.0172 19.4249 24.9489 19.3174 24.9489C19.21 24.9489 19.1144 25.0172 19.0795 25.1189L19.3174 25.2004ZM21.1749 25.7941C21.2534 25.6795 21.2242 25.523 21.1096 25.4445C20.995 25.366 20.8385 25.3952 20.7599 25.5098L21.1749 25.7941ZM17.46 25.7941C17.5295 25.8955 17.6557 26.0315 17.8249 26.1437C17.9957 26.257 18.2239 26.355 18.4925 26.355V25.852C18.3485 25.852 18.2158 25.7994 18.103 25.7246C17.9886 25.6487 17.9086 25.5589 17.875 25.5098L17.46 25.7941ZM18.4925 26.355C18.823 26.355 19.0688 26.1192 19.2218 25.9162C19.3834 25.7019 19.4975 25.4508 19.5554 25.282L19.0795 25.1189C19.0342 25.2511 18.9422 25.4515 18.8201 25.6135C18.6895 25.7867 18.5744 25.852 18.4925 25.852V26.355ZM19.0795 25.282C19.1374 25.4508 19.2515 25.7019 19.4131 25.9162C19.5661 26.1192 19.8119 26.355 20.1424 26.355V25.852C20.0605 25.852 19.9454 25.7867 19.8148 25.6135C19.6927 25.4515 19.6006 25.2511 19.5554 25.1189L19.0795 25.282ZM20.1424 26.355C20.411 26.355 20.6392 26.257 20.81 26.1437C20.9792 26.0315 21.1054 25.8955 21.1749 25.7941L20.7599 25.5098C20.7263 25.5589 20.6463 25.6487 20.5319 25.7246C20.4191 25.7994 20.2863 25.852 20.1424 25.852V26.355Z"
+            fill="#222327" />
+          <path
+            d="M20.6906 24.968C20.6906 25.1773 19.7486 25.4435 19.4315 25.5272C19.3638 25.5451 19.2939 25.5451 19.2261 25.5272C18.9091 25.4435 17.967 25.1773 17.967 24.968C17.967 24.7165 18.72 24.4475 19.3288 24.4475C19.9376 24.4475 20.6906 24.7165 20.6906 24.968Z"
+            fill="#222327" />
+          <path
+            d="M19.166 18.2763C15.3818 18.2763 13.9911 16.9468 13.7661 16.1692L15.5661 14.2127L19.466 13.5354L24.8659 16.1692C24.5409 16.7963 22.9544 18.2763 19.166 18.2763Z"
+            fill="#222327" />
+          <path fill-rule="evenodd" clip-rule="evenodd"
+            d="M19.6898 32.4992C27.5098 32.4992 33.2427 30.2952 33.2427 24.3659C33.2427 16.9484 27.5098 11.3528 19.6898 11.3528C11.8698 11.3528 6.2666 17.469 6.2666 24.3659C6.2666 30.2952 11.8698 32.4992 19.6898 32.4992ZM19.3823 30.2221C25.1345 30.2221 29.3515 28.6081 29.3515 24.2661C29.3515 18.8342 25.1345 14.7364 19.3823 14.7364C13.6301 14.7364 9.50854 19.2154 9.50854 24.2661C9.50854 28.6081 13.6301 30.2221 19.3823 30.2221Z"
+            fill="white" />
+        </svg>
+        <div id="btnMarket" class="판다마켓logo">판다마켓</div>
+      </div>
+      <button id="btnLogin" class="btn_small_48">로그인</button>
+    </div>
+    </div>
+  </header>
+
+  <!-- section start-->
+  <section class="desktop_main_section">
+    <ul>
+      <li>
+        <div class="desktop_01">
+          <div class="frame_2610528">
+            <div class="text_body">일상의 모든 물건을 거래해 보세요</div>
+            <button id="btnShopping" class="btn_large">구경하러 가기</button>
+            <img src="img/Img_home_top.png" alt="">
+          </div>
+        </div>
+      </li>
+      <li>
+        <div class="desktop_02">
+          <img src="img/Img_home_01.png" alt="">
+          <div class="frame_2609390">
+            <div class="text_top">Hot item</div>
+            <div class="text_body">인기 상품을 확인해 보세요</div>
+            <div class="text_bottom">가장 HOT한 중고거래 물품을 판다 마켓에서 확인해 보세요</div>
+          </div>
+        </div>
+      </li>
+      <li>
+        <div class="desktop_03">
+          <div class="frame_2609391">
+            <div class="text_top">Hearch</div>
+            <div class="text_body">구매를 원하는 상품을 검색하세요</div>
+            <div class="text_bottom">구매하고 싶은 물품은 검색해서 쉽게 찾아보세요</div>
+          </div>
+          <img src="img/Img_home_02.png" alt="">
+        </div>
+      </li>
+      <li>
+        <div class="desktop_04">
+          <img src="img/Img_home_03.png" alt="">
+          <div class="frame_2609392">
+            <div class="text_top">Register</div>
+            <div class="text_body">판매를 원하는 상품을 등록하세요</div>
+            <div class="text_bottom">어떤 물건이든 판매하고 싶은 상품을 쉽게 등록하세요</div>
+          </div>
+        </div>
+      </li>
+      <li>
+        <div class="desktop_05">
+          <div class="frame_2610528">
+            <div class="text_body">일상의 모든 물건을 거래해 보세요</div>
+          </div>
+          <img src="img/Img_home_bottom.png" alt="">
+        </div>
+      </li>
+
+    </ul>
+  </section>
+
+  <!-- footer start-->
+  <footer class="frame_33707_footer">
+    <div class="codeit_2024_footer">
+      <div>
+        ©codeit - 2024
+      </div>
+      <div class="privacy_policy_faq_footer">
+        <div>Privacy Policy</div>
+        <div>FAQ</div>
+      </div>
+      <div>
+        <img class="footer-icon" src="img/ic_facebook.png" alt="https://www.facebook.com/">
+        <img class="footer-icon" src="img/ic_twitter.png" alt="https://twitter.com">
+        <img class="footer-icon" src="img/ic_youtube.png" alt="https://youtube.com">
+        <img class="footer-icon" src="img/ic_instagram.png" alt="https://instagram.com">
+      </div>
+    </div>
+  </footer>
+
+
+
+  <!-- 외부 자바스크립트 연결 -->
+  <script src="./index.js"></script>  
+</body>
+
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,34 @@
+//판다마켓 클릭시 루트 페이지로 이동
+const btnMarket = document.getElementById("btnMarket");
+if (btnMarket) {
+  btnMarket.addEventListener("click", () => {
+    window.open('/', '_blank');
+  });
+} else {
+  console.error("Element with id 'btnMarket' not found");
+}
+//로그인 버튼 클릭 시 로그인 화면으로 이동
+const btnLogin = document.getElementById("btnLogin");
+btnLogin.addEventListener("click", () => {
+  window.open('/login', '_blank')
+});
+
+//장보러가기 버튼 클릭 시 장보러가기 화면으로 이동
+const btnShopping = document.getElementById("btnShopping");
+btnShopping.addEventListener("click", () => {
+  window.open('/items', '_blank')
+});
+
+//푸터 아이콘 클릭시 각각의 홈페이지로 이동
+const images = document.querySelectorAll('.footer-icon');
+images.forEach(image => {
+  image.addEventListener('click', () => {
+    const imageUrl = image.getAttribute('alt')
+    if (imageUrl) {
+      console.log(imageUrl)
+      window.open(imageUrl, '_blank')
+    } else {
+      console.error('Image alt attribute is missing or empty')
+    }
+  })
+})
diff --git a/items.html b/items.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+  <h1>구경하러 가기 화면입니다.</h1>
+</body>
+</html>
diff --git a/login.html b/login.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+  <h1>로그인 화면입니다.</h1>
+</body>
+</html>