codeit-sprint-fullstack · ranflir · Dec 3, 2025 · Dec 4, 2025 · Dec 5, 2025 · Dec 24, 2025
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+  "liveServer.settings.port": 5501,
+  "cSpell.words": ["codeit", "NXNMB"]
+}
diff --git a/Index.html b/Index.html
@@ -0,0 +1,197 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <!-- Google Tag Manager -->
+    <script>
+      (function (w, d, s, l, i) {
+        w[l] = w[l] || [];
+        w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
+        var f = d.getElementsByTagName(s)[0],
+          j = d.createElement(s),
+          dl = l != 'dataLayer' ? '&l=' + l : '';
+        j.async = true;
+        j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
+        f.parentNode.insertBefore(j, f);
+      })(window, document, 'script', 'dataLayer', 'GTM-NXNMB8PH');
+    </script>
+    <!-- End Google Tag Manager -->
+
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>판다마켓</title>
+    <link rel="icon" href="images/logo/favicon.ico" />
+    <link
+      rel="stylesheet"
+      as="style"
+      crossorigin
+      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"
+    />
+    <link rel="stylesheet" href="styles/global.css" />
+    <link rel="stylesheet" href="styles/home.css" />
+
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=GTM-NXNMB8PH"
+    ></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag('js', new Date());
+
+      gtag('config', 'GTM-NXNMB8PH');
+    </script>
+  </head>
+
+  <body>
+    <!-- Google Tag Manager (noscript) -->
+    <noscript>
+      <iframe
+        src="https://www.googletagmanager.com/ns.html?id=GTM-NXNMB8PH"
+        height="0"
+        width="0"
+        style="display: none; visibility: hidden"
+      ></iframe>
+    </noscript>
+    <!-- End Google Tag Manager (noscript) -->
+    <header>
+      <a href="/">
+        <img src="images/logo/logo.svg" alt="판다마켓 홈" width="153" />
+      </a>
+      <a href="login.html" id="loginLinkButton" class="button">로그인</a>
+    </header>
+
+    <main class="with-header">
+      <section id="hero" class="banner">
+        <div class="wrapper">
+          <h1>
+            일상의 모든 물건을
+            <br />
+            거래해 보세요
+          </h1>
+          <a href="items.html" class="button pill-button">구경하러 가기</a>
+        </div>
+      </section>
+
+      <section id="features" class="wrapper">
+        <div class="feature">
+          <img
+            src="images/home/feature1-image.png"
+            alt="인기 상품"
+            width="50%"
+          />
+          <div class="feature-content">
+            <h2 class="feature-tag">Hot item</h2>
+            <h1>
+              인기 상품을
+              <br />
+              확인해 보세요
+            </h1>
+            <p class="feature-description">
+              가장 HOT한 중고거래 물품을
+              <br />
+              판다마켓에서 확인해 보세요
+            </p>
+          </div>
+        </div>
+        <div class="feature">
+          <div class="feature-content">
+            <h2 class="feature-tag">Search</h2>
+            <h1>
+              구매를 원하는
+              <br />
+              상품을 검색하세요
+            </h1>
+            <p class="feature-description">
+              구매하고 싶은 물품은 검색해서
+              <br />
+              쉽게 찾아보세요
+            </p>
+          </div>
+          <img
+            src="images/home/feature2-image.png"
+            alt="검색 기능"
+            width="50%"
+          />
+        </div>
+        <div class="feature">
+          <img
+            src="images/home/feature3-image.png"
+            alt="판매 상품 등록"
+            width="50%"
+          />
+          <div class="feature-content">
+            <h2 class="feature-tag">Register</h2>
+            <h1>
+              판매를 원하는
+              <br />
+              상품을 등록하세요
+            </h1>
+            <p class="feature-description">
+              어떤 물건이든 판매하고 싶은 상품을
+              <br />
+              쉽게 등록하세요
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section id="bottomBanner" class="banner">
+        <div class="wrapper">
+          <h1>
+            믿을 수 있는
+            <br />
+            판다마켓 중고거래
+          </h1>
+        </div>
+      </section>
+    </main>
+
+    <footer>
+      <div>©codeit - 2024</div>
+      <div id="footerMenu">
+        <a href="privacy.html">Privacy Policy</a>
+        <a href="faq.html">FAQ</a>
+      </div>
+      <div id="socialMedia">
+        <a
+          href="https://www.facebook.com/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <img
+            src="images/social/facebook-logo.svg"
+            alt="페이스북"
+            width="20"
+          />
+        </a>
+        <a
+          href="https://twitter.com/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <img src="images/social/twitter-logo.svg" alt="트위터" width="20" />
+        </a>
+        <a
+          href="https://www.youtube.com/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <img src="images/social/youtube-logo.svg" alt="유튜브" width="20" />
+        </a>
+        <a
+          href="https://www.instagram.com/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <img
+            src="images/social/instagram-logo.svg"
+            alt="인스타그램"
+            width="20"
+          />
+        </a>
+      </div>
+    </footer>
+  </body>
+</html>
diff --git a/faq.html b/faq.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>판다마켓 - FAQ</title>
+    <link rel="icon" href="images/logo/favicon.ico" />
+    <link
+      rel="stylesheet"
+      as="style"
+      crossorigin
+      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"
+    />
+    <link rel="stylesheet" href="styles/global.css" />
+  </head>
+
+  <body>
+    <h1>임시 FAQ 페이지</h1>
+  </body>
+</html>
diff --git a/images/Img_home_01.png b/images/Img_home_01.png
diff --git a/images/Img_home_02.png b/images/Img_home_02.png
diff --git a/images/Img_home_03.png b/images/Img_home_03.png
diff --git a/images/Img_home_bottom.png b/images/Img_home_bottom.png
diff --git a/images/Img_home_top.png b/images/Img_home_top.png
diff --git a/images/favicon.ico b/images/favicon.ico
diff --git a/images/googleicon.png b/images/googleicon.png
diff --git a/images/home/bottom-banner-image.png b/images/home/bottom-banner-image.png
diff --git a/images/home/feature1-image.png b/images/home/feature1-image.png
diff --git a/images/home/feature2-image.png b/images/home/feature2-image.png
diff --git a/images/home/feature3-image.png b/images/home/feature3-image.png
diff --git a/images/home/hero-image.png b/images/home/hero-image.png
diff --git a/images/ic_facebook.png b/images/ic_facebook.png
diff --git a/images/ic_instagram.png b/images/ic_instagram.png
diff --git a/images/ic_twitter.png b/images/ic_twitter.png
diff --git a/images/ic_youtube.png b/images/ic_youtube.png
diff --git a/images/icons/eye-invisible.svg b/images/icons/eye-invisible.svg
diff --git a/images/icons/eye-visible.svg b/images/icons/eye-visible.svg
diff --git a/images/kakaoicon.png b/images/kakaoicon.png
diff --git a/images/logo.svg b/images/logo.svg
diff --git a/images/logo/favicon.ico b/images/logo/favicon.ico