codeit-bootcamp-nodejs · hyeyoonS · May 21, 2024 · May 21, 2024 · May 21, 2024 · May 21, 2024
diff --git a/README.md b/README.md
@@ -1,44 +1,30 @@
-### 스프린트 미션 제출 방법
+# 🍀일상의 모든 물건을 거래할 수 있는 판다마켓
+### ✅ [배포 사이트 보러가기!](https://hy-pandamarket-1.netlify.app/)
 
-- **codeit-bootcamp-backend / QA-sprint-mission** 에서 `fork` 합니다.
+          
 
-  - main branch only 체크를 **해제**합니다.
+ <img src="https://github.com/hyeyoonS/QA-sprint-mission/assets/144667455/42ec4f3b-194e-4a84-b39f-71071851b9c5" width="375" height="540">  <img src="https://github.com/hyeyoonS/QA-sprint-mission/assets/144667455/ef9618ba-5f05-4ad6-bdc9-aefe2cd04505" width="375" height="540">
 
-- `fork` 해 온 repository에서 자신의 담당에 맞는 `백엔드/풀스택` 브랜치를 `clone` 해서 작업합니다.
 
-  ```bash
-  git clone -b 백엔드/풀스택 --single-branch {저장소 URL}
-  ```
+---
 
-- **클론한 폴더 열고, base 브랜치가 `백엔드/풀스택` 브랜치인지 확인합니다.** 만약 그렇지 않다면, 아래 명령어로 base 브랜치를 이동합니다.
+<br/>
 
-  ```bash
-  git checkout 백엔드/풀스택
-  ```
+# 💖프로젝트 소개
 
-- `백엔드/풀스택` 브랜치를 기준으로 각 미션마다 `백엔드/풀스택-mission번호` 브랜치를 생성합니다.
+<br/>
 
-  ```bash
-  git checkout -b 백엔드/풀스택-mission3
-  ```
+### ✨ 인기 상품을 확인해보세요!
+- 지금 가장 HOT한 중고거래 물품을 판다 마켓에서 확인해 보세요!
+### 🔍구매를 원하는 상품을 검색해보세요!
+- 구매하고 싶은 물품은 검색해서 쉽게 찾아보세요!
+### 🪄 판매를 원하는 상품을 등록해보세요!
+- 어떤 물건이든 판매하고 싶은 상품을 쉽게 등록하세요!
 
-- `백엔드/풀스택-mission3` 브랜치에서 해당 스프린트 미션을 진행 후 `push` 합니다.
 
-- 위 과정을 통해 미션을 다 완료했다면, **PR**(Pull Request)을 올립니다.
 
-  -  ex)  `jiwoo-im/백엔드-mission3` → `codeit-bootcamp-backend/백엔드`
+<br>
 
+## 🧐기술 스택
 
-
-### PR 템플릿
-
-```markdown
-### 주요 변경사항
--
--
-
-### QA 의견
--
--
-```
-
+## 💖주요 기능
diff --git a/index.html b/index.html
@@ -0,0 +1,229 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="keyword" content="pandamarket, 판다마켓, codeit, 코드잇" />
+
+    <!-- og 메타태그 -->
+    <meta
+      property="og:title"
+      content="판다마켓 - 일상의 모든 물건을 거래해보세요"
+    />
+    <meta
+      property="og:description"
+      content="판다마켓에서 다양한 상품을 구경하고 거래하세요."
+    />
+    <meta
+      property="og:image"
+      content="https://i.pinimg.com/564x/46/cb/8b/46cb8b3ea03237da9c847baaf9e0ec43.jpg"
+    />
+    <meta property="og:url" content="https://hy-pandamarket-1.netlify.app/" />
+    <meta property="og:type" content="website" />
+
+    <!-- Twitter 메타태그 -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta
+      name="twitter:title"
+      content="판다마켓 - 일상의 모든 물건을 거래해보세요"
+    />
+    <meta
+      name="twitter:description"
+      content="판다마켓에서 다양한 상품을 구경하고 거래하세요."
+    />
+    <meta
+      name="twitter:image"
+      content="https://i.pinimg.com/564x/46/cb/8b/46cb8b3ea03237da9c847baaf9e0ec43.jpg"
+    />
+    <meta name="twitter:url" content="https://hy-pandamarket-1.netlify.app/" />
+
+    <!-- 그외 -->
+    <meta
+      name="description"
+      content="판다마켓에서 다양한 상품을 구경하고 거래하세요."
+    />
+    <link rel="canonical" href="https://hy-pandamarket-1.netlify.app/" />
+
+    <title>판다마켓</title>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"
+    />
+    <link rel="stylesheet" href="/src/style/reset.css" />
+    <link rel="stylesheet" href="/src/style/index.css" type="text/css" />
+
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=G-CVD8CL1E38"
+    ></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
+
+      gtag("config", "G-CVD8CL1E38");
+    </script>
+  </head>
+  <body>
+    <nav role="navigation">
+      <div class="header_nav">
+        <a href="/" class="nav_logo" aria-label="판다마켓로고"></a>
+        <div class="header_category">
+          <a class="category_btn" href="/">자유게시판</a>
+          <a class="category_btn" href="/">중고마켓</a>
+        </div>
+        <a class="login_btn" href="/pages/signin.html">로그인</a>
+      </div>
+    </nav>
+    <header class="header_section">
+      <!-- 큰 틀 -->
+      <div class="header_container">
+        <!-- 글자 부분 -->
+        <div class="header_wrapper">
+          <h1 class="header_title">일상의 모든 물건을 <br />거래해보세요</h1>
+          <a href="/pages/items.html" class="header_btn">구경하러가기 </a>
+        </div>
+
+        <!-- 이미지 부분 -->
+        <div class="header_img_container">
+          <img
+            src="src/assets/image/header-content-image.png"
+            alt="헤더 이미지"
+          />
+        </div>
+      </div>
+    </header>
+
+    <main id="main">
+      <section class="section_container_left">
+        <div class="section_wrapper left">
+          <img
+            src="/src/assets/image/home_01-image.png"
+            alt="link_save_img"
+            class="section_img"
+          />
+          <div class="text_content_right">
+            <div class="section_badge">Hot item</div>
+            <span class="section_title">
+              인기 상품을
+              <br />
+              확인해보세요
+            </span>
+            <p class="section_summary">
+              가장 HOT한 중고거래 물품을
+              <br />
+              판다 마켓에서 확인해 보세요
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section class="section_container_right">
+        <div class="section_wrapper right">
+          <div class="text_content_left">
+            <div class="section_badge">Search</div>
+            <span class="section_title">
+              구매를 원하는
+              <br />
+              상품을 검색하세요
+            </span>
+            <p class="section_summary">
+              구매하고 싶은 물품은 검색해서
+              <br />
+              쉽게 찾아보세요
+            </p>
+          </div>
+          <img
+            src="/src/assets/image/home_02-image.png"
+            alt="folder_name_modify_img"
+            class="section_img"
+          />
+        </div>
+      </section>
+
+      <section class="section_container_left">
+        <div class="section_wrapper left">
+          <img
+            src="/src/assets/image/home_03-image.png"
+            alt="social_media_share_img"
+            class="section_img"
+          />
+          <div class="text_content_right">
+            <div class="section_badge">Register</div>
+            <span class="section_title">
+              판매를 원하는
+              <br />
+              상품을 등록하세요
+            </span>
+            <p class="section_summary">
+              어떤 물건이든 판매하고 싶은 상품을
+              <br />
+              쉽게 등록하세요
+            </p>
+          </div>
+        </div>
+      </section>
+    </main>
+    <section class="bottom_header_section">
+      <div class="header_container">
+        <div class="bottom_header_wrapper">
+          <h1 class="bottom header_title">
+            믿을 수 있는<br />
+            판다마켓 중고거래
+          </h1>
+        </div>
+        <div class="bottom_header_img_container">
+          <img
+            src="/src/assets/image/home_bottom-image.png"
+            alt="바텀헤더 이미지"
+          />
+        </div>
+      </div>
+    </section>
+    <footer>
+      <div class="footer_wrapper">
+        <span class="copyright"> ©codeit - 2024 </span>
+        <div class="explain">
+          <a href="/pages/privacy.html" class="footer_link">Privacy Policy</a>
+          <a href="/pages/faq.html" class="footer_link">FAQ</a>
+        </div>
+        <div class="sns_icon">
+          <a
+            href="https://www.facebook.com/?locale=ko_KR"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <img src="/src/assets/svg/facebook-icon.svg" alt="facebook_logo" />
+          </a>
+          <a
+            href="https://www.twitter.com/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <img src="/src/assets/svg/twitter-icon.svg" alt="twitter_logo" />
+          </a>
+          <a
+            href="https://www.youtube.com/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <img src="/src/assets/svg/youtube-icon.svg" alt="youtube_logo" />
+          </a>
+          <a
+            hre="https://www.instagram.com/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <img
+              src="/src/assets/svg/instagram-icon.svg"
+              alt="instagram_logo"
+            />
+          </a>
+        </div>
+      </div>
+    </footer>
+  </body>
+</html>
diff --git a/pages/faq.html b/pages/faq.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>FQA</title>
+    <!-- <link rel="stylesheet" href="/styles/sign.css" /> -->
+  </head>
+  <body>
+    FQA 페이지에용
+  </body>
+</html>
diff --git a/pages/items.html b/pages/items.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>items</title>
+    <!-- <link rel="stylesheet" href="/styles/sign.css" /> -->
+  </head>
+  <body>
+    아이템 페이지에용
+  </body>
+</html>
diff --git a/pages/privacy.html b/pages/privacy.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Privacy</title>
+    <!-- <link rel="stylesheet" href="/styles/sign.css" /> -->
+  </head>
+  <body>
+    프라이버시 페이지에용
+  </body>
+</html>