codeit-sprint-fullstack · dev-kjy · Apr 5, 2026 · Mar 30, 2026 · Mar 31, 2026 · Mar 31, 2026
diff --git a/README_KCH.md b/README_KCH.md
@@ -0,0 +1,72 @@
+### ★README.md 파일에 요구사항 체크 작성했습니다!!! PR 코멘트에도 하기 내용 포함할 예정입니다!
+
+# SPRINT_MISSION_1 요구사항 체크
+
+## 기본 요구사항
+
+- [x] React와 같은 UI 라이브러리를 사용하지 않고 진행합니다.
+- [x] PC사이즈만 고려해 주어진 디자인으로 구현합니다.
+- [x] HTML, CSS 파일을 Netlify로 배포해 주세요.
+- [x] 랜딩 페이지의 url path는 루트('/')로 설정합니다.
+- [x] title은 "판다마켓"으로 설정합니다.
+- [x] "판다마켓" 로고 클릭 시 루트 페이지('/')로 이동합니다.
+- [x] '로그인' 버튼 클릭 시 로그인 페이지('/login')로 이동합니다.(빈 페이지)
+- [x] "구경하러 가기" 버튼 클릭 시 ('/items')로 이동합니다.(빈 페이지)
+- [x] "Privacy Policy", "FAQ"는 클릭 시 각각 Privacy 페이지('/privacy'), FAC페이지('/faq')로 이동합니다.(모두 빈 페이지)
+- [x] 페이스북, 트위터, 유튜브, 인스타그램 아이콘을 클릭 시 각각의 홈페이지로 새로운 창이 열리면서 이동합니다.
+- [x] 아래로 스크롤해도 "판다 마켓" 로고와 "로그인" 버튼이 있는 상단 내비게이션 바(Global Navigation Bar)가 최상단에 고정되게 해주세요.
+- [x] 화면의 너비가 1920px 이상이면 내부에 있는 요소 간 동일한 간격을 유지하며 가운데 정렬해야 합니다.
+- [x] 화면의 너비가 1920px보다 작아질 때, 최하단에 있는 "codeit-2024"의 왼쪽 여백 200px과 SNS 아이콘들의 오른쪽 여백 200px을 유지하면서 가운데 있는 "Privacy Policy", "FAQ" 요소와 각각 동일한 간격을 유지하며 가까워져야 합니다.
+
+## 심화 요구사항
+
+- [x] reset.css를 설정해 주세요.
+- [x] 사용자의 브라우저 설정에 따라 기본 폰트 크기 설정이 변화함에 따라서 페이지의 요소 간 간격, 요소의 크기, font-size 등 모든 크기와 관련된 값이 크고 작아지도록 설정해 주세요.
+
+---
+
+# SPRINT_MISSION_2 요구사항 체크
+
+## 기본 요구사항
+
+### 공통
+
+- [x] README.md 파일을 작성해 주세요.
+  - [x] 마크다운 언어를 숙지하여 작성해 주세요.
+  - [x] 내용은 자유롭게 작성해 주세요.
+- [ ] 본인 브랜치에 스프린트 미션을 업로드해 주세요.
+- [ ] 적절한 커밋 메시지를 남겨 주세요.
+- [x] 1-Sprint-Mission 레포지토리를 fork합니다.
+- [ ] GitHub에 PR(Pull Request)을 생성해 upstream의 본인 브랜치에 미션을 제출합니다.
+- [ ] PR 코멘트에 아래 내용들을 포함해 주세요.
+  - [ ] 스프린트 미션 요구사항 체크리스트
+  - [ ] 주요 변경사항
+  - [ ] 멘토님에게 남길 메시지
+- [x] Git 활용 과정에서 유닉스 커맨드를 활용해 주세요.
+- [ ] HTML, CSS 파일을 Netlify로 배포합니다.
+
+### 로그인 페이지, 회원가입 페이지 공통
+
+- [x] "판다마켓" 로고 클릭 시 루트 페이지("/")로 이동합니다.
+- [x] SNS 아이콘들은 클릭 시 각각 "https://www.google.com/", "https://www.kakaocorp.com/page/"으로 이동합니다.
+- [x] input 요소에 focus in 일 때, 테두리 색상은 ##3692FF입니다.
+- [x] input 요소에 focus out 일 때, 테두리는 없습니다.
+
+### 로그인 페이지
+
+- [x] "회원가입" 버튼 클릭 시 "/signup" 페이지로 이동합니다.
+
+### 회원가입 페이지
+
+- [x] "로그인" 버튼 클릭 시 "/login" 페이지로 이동합니다.
+
+## 심화 요구사항
+
+### 공통
+
+- [x] palette에 있는 color값들을 css 변수로 등록해서 사용합니다.
+- [x] 구글 애널리틱스로 방문자 수 확인하기 할 수 있도록 설정합니다.
+
+### 로그인 페이지, 회원가입 페이지 공통
+
+- [x] 비밀번호, 비밀번호 확인 input 요소 오른쪽에 비밀번호를 확인할 수 있는 눈 모양 아이콘을 추가합니다.
diff --git a/browser/Instagram.html b/browser/Instagram.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Instagram</title>
+  </head>
+  <body>
+    <h1>Instagram Page</h1>
+  </body>
+</html>
diff --git a/browser/facebook.html b/browser/facebook.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Facebook</title>
+  </head>
+  <body>
+    <h1>Facebook Page</h1>
+  </body>
+</html>
diff --git a/browser/twitter.html b/browser/twitter.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Twitter</title>
+  </head>
+  <body>
+    <h1>Twitter Page</h1>
+  </body>
+</html>
diff --git a/browser/youtube.html b/browser/youtube.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Youtube</title>
+  </head>
+  <body>
+    <h1>Youtube Page</h1>
+  </body>
+</html>
diff --git a/faq/faq.html b/faq/faq.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>FAQ</title>
+  </head>
+  <body>
+    <h1>FAQ 페이지입니다.</h1>
+  </body>
+</html>
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/backgrounimg-bottom.png b/images/backgrounimg-bottom.png
diff --git a/images/btn_large.png b/images/btn_large.png
diff --git a/images/btn_large_loginpage.png b/images/btn_large_loginpage.png
diff --git a/images/ic_facebook.png b/images/ic_facebook.png
diff --git a/images/ic_google.png b/images/ic_google.png
diff --git a/images/ic_instagram.png b/images/ic_instagram.png
diff --git a/images/ic_kakao.png b/images/ic_kakao.png
diff --git a/images/ic_secret.png b/images/ic_secret.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/loginbtn.png b/images/loginbtn.png
diff --git a/images/logo.png b/images/logo.png
diff --git a/images/mainlogo.png b/images/mainlogo.png
diff --git a/images/section 1.png b/images/section 1.png
diff --git a/images/section 2.png b/images/section 2.png
diff --git a/images/section 3.png b/images/section 3.png
diff --git a/images/section 4.png b/images/section 4.png
diff --git a/images/seeingsightbackground.png b/images/seeingsightbackground.png
diff --git a/index.html b/index.html
@@ -0,0 +1,107 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <!-- Google Analytics (GA4) -->
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=G-NPMW73453S"
+    ></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
+
+      gtag("config", "G-NPMW73453S");
+    </script>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>판다마켓</title>
+    <link rel="stylesheet" href="./reset.css" />
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+
+  <body>
+    <header class="header">
+      <div class="header-inner">
+        <a class="main-logo" href="./index.html"></a>
+        <a class="login-btn" href="/login/loginpage.html"></a>
+      </div>
+    </header>
+
+    <main class="main">
+      <div class="main-inner">
+        <section class="hero-section">
+          <div class="background-img"></div>
+          <div class="left-panel">
+            <h1 class="top-text">일상의 모든 물건을 거래해 보세요</h1>
+            <a class="seeing-item" href="/items/items.html"></a>
+          </div>
+          <div class="right-panel"></div>
+        </section>
+        <section class="main-item">
+          <div class="items">
+            <img src="images/section 1.png" alt="인기상품을 확인해 보세요" />
+          </div>
+          <div class="items">
+            <img
+              src="images/section 2.png"
+              alt="구매를 원하는 상품을 검색하세요"
+            />
+          </div>
+          <div class="items">
+            <img
+              src="images/section 3.png"
+              alt="판매를 원하는 상품을 등록하세요"
+            />
+          </div>
+          </div>
+        </section>
+        <section class="main-bottom-item">
+          <div class="background-img"></div>
+          <div class="left-bottom-panel">
+            <h1 class="bottom-text">믿을 수 있는<br> 판다마켓 중고 거래</h1>
+          </div>
+          <div class="right-bottom-panel"></div>
+        </section>
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-inner">
+        <div class="left-footer">
+          <h1>@Codeit - 2024</h1>
+        </div>
+        <div class="center-footer">
+          <a class="privacy-btn" href="/privacy/privacy.html">Privacy Policy</a>
+          <a class="faq-btn" href="/faq/faq.html">FAQ</a>
+        </div>
+        <div class="right-footer">
+          <nav class="footer-nav">
+            <a
+              class="facebook-icon"
+              href="/browser/facebook.html"
+              target="_blank"
+            ></a>
+            <a
+              class="twitter-icon"
+              href="/browser/twitter.html"
+              target="_blank"
+            ></a>
+            <a
+              class="youtube-icon"
+              href="/browser/youtube.html"
+              target="_blank"
+            ></a>
+            <a
+              class="instagram-icon"
+              href="/browser/Instagram.html"
+              target="_blank"
+            ></a>
+          </nav>
+        </div>
+      </div>
+    </footer>
+  </body>
+</html>
diff --git a/items/items.html b/items/items.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>구경하러 가기</title>
+  </head>
+  <body>
+    <h1>구경하러 가기 페이지입니다.</h1>
+  </body>
+</html>
diff --git a/login/loginpage.html b/login/loginpage.html
@@ -0,0 +1,71 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <!-- Google Analytics (GA4) -->
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=G-NPMW73453S"
+    ></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
+
+      gtag("config", "G-NPMW73453S");
+    </script>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>로그인</title>
+    <link rel="stylesheet" href="../reset.css" />
+    <link rel="stylesheet" href="./loginstyle.css" />
+  </head>
+  <body>
+    <header class="header-container"></header>
+
+    <main class="main-inner">
+      <section class="main-move">
+        <a class="login-title" href="../index.html"></a>
+      </section>
+
+      <section class="login-panel">
+        <div class="placeholder">
+          <div class="e-mail">
+            <h1 class="font-weight">이메일</h1>
+            <input
+              type="text"
+              class="input-field"
+              placeholder="이메일을 입력해주세요"
+            />
+          </div>
+          <div class="password">
+            <h1 class="font-weight">비밀번호</h1>
+            <input
+              type="password"
+              class="input-field"
+              placeholder="비밀번호를 입력해주세요"
+            />
+            <button class="secret-btn"></button>
+          </div>
+          <div class="login-btn">
+            <button class="btn-submit">로그인</button>
+          </div>
+        </div>
+        <div class="simple-login">
+          <h1>간편 로그인 하기</h1>
+          <div class="sns-logo">
+            <a class="google-logo" href="https://www.google.com/"></a>
+            <a class="kakao-logo" href="https://www.kakaocorp.com/page/"></a>
+          </div>
+        </div>
+        <div class="signup-btn">
+          <h1>판다마켓이 처음이신가요?</h1>
+          <a href="../signup/signup-page.html">회원가입</a>
+        </div>
+      </section>
+    </main>
+
+    <footer class="footer-container"></footer>
+  </body>
+</html>