codeit-sprint-fullstack · paran22 · Apr 7, 2026 · Apr 1, 2026 · Apr 6, 2026 · Apr 6, 2026
diff --git a/FAQ/faq.html b/FAQ/faq.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <!-- Google tag (gtag.js) -->
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"
+    ></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
+      gtag("config", "G-XXXXXXXXXX");
+    </script>
+
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>FAQ</title>
+  </head>
+  <body>
+    <div>FAQ페이지입니다</div>
+  </body>
+</html>
diff --git a/Login/google-favicon.png b/Login/google-favicon.png
diff --git a/Login/kakao-favicon.png b/Login/kakao-favicon.png
diff --git a/Login/login.css b/Login/login.css
@@ -0,0 +1,225 @@
+:root {
+  --primary100: #3692ff; /* 메인 파란색 */
+  --gray100: #f3f4f6; /* 밝은 회색 배경 */
+  --gray200: #9ca3af; /* 중간 회색 텍스트 */
+  --gray300: #1f2937; /* 진한 회색 텍스트 */
+  --blue-bg: #e6f2ff; /* 연한 파란색 배경 */
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.body {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  min-height: 100vh;
+  overflow-y: hidden;
+}
+
+#email:focus,
+#password:focus {
+  outline: none;
+  border: 1px solid var(--primary100);
+}
+
+@font-face {
+  font-family: ROKAF Sans;
+  src: url("../font-family/ROKAFSansMedium.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: Pretendard;
+  src: url("/font-family/PretendardVariable.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
+
+/* section 레이아웃 */
+.login-sec {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  width: 40rem;
+}
+
+.home-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1.39rem;
+  width: 100%;
+  margin-bottom: 40px;
+}
+
+.logo-text {
+  font-family:
+    ROKAF Sans,
+    sans-serif;
+  font-weight: 700;
+  font-style: Bold;
+  font-size: 66.34px;
+  line-height: 100%;
+  color: var(--primary100);
+  text-decoration: none;
+}
+
+/* 이메일 비밀번호 파트 */
+.login-form {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.input-group {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+.form-label {
+  font-family: Pretendard;
+  font-weight: 700;
+  font-size: 18px;
+  line-height: 26px;
+  color: var(--gray300);
+  margin-bottom: 16px;
+}
+
+#email {
+  font-family: Pretendard;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 26px;
+  color: var(--gray200);
+  background-color: var(--gray100);
+  width: 640px;
+  height: 56px;
+  border-radius: 12px;
+  padding: 16px 24px;
+  border: none;
+}
+
+.pw-wrapper {
+  position: relative;
+  width: 640px;
+}
+
+#password {
+  width: 100%;
+  height: 56px;
+  border-radius: 12px;
+  padding: 16px 48px 16px 24px; /* 오른쪽 공간 확보 */
+  background-color: var(--gray100);
+  font-family: Pretendard;
+  font-size: 16px;
+  color: var(--gray200);
+  border: none;
+  outline: none;
+}
+
+.visible-btn {
+  position: absolute;
+  right: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+  background: none;
+  border: none;
+  padding: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.visible-btn svg {
+  width: 20px;
+  height: 20px;
+  fill: var(--gray300);
+}
+
+.login-btn {
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--gray200);
+  color: var(--gray100);
+  width: 640px;
+  height: 56px;
+  border-radius: 40px;
+  padding: 16px 124px;
+  margin: 24px 0;
+  font-family: Pretendard;
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 32px;
+  text-align: center;
+}
+
+.link-out {
+  background-color: var(--blue-bg);
+  width: 640px;
+  height: 74px;
+  border-radius: 8px;
+  padding: 16px 23px;
+  display: flex;
+}
+
+.nav {
+  width: 594px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.simple-in {
+  display: flex;
+  flex-direction: row;
+  font-family: Pretendard;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 26px;
+  color: var(--gray300);
+}
+
+.favicon {
+  display: flex;
+  gap: 16px;
+}
+
+.signup-link {
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+}
+
+.text-wrapper {
+  display: flex;
+  align-items: center;
+  margin-top: 24px;
+  gap: 4px;
+}
+
+.text1 {
+  font-family: Pretendard;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 24px;
+  color: var(--gray300);
+}
+
+.link-signup {
+  font-family: Pretendard;
+  font-weight: 500;
+  font-size: 14px;
+  text-decoration: underline;
+  color: var(--primary100);
+}
diff --git a/Login/login.html b/Login/login.html
@@ -0,0 +1,96 @@
+<!doctype html>
+<html lang="ko">
+  <head>
+    <!-- Google tag (gtag.js) -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+  gtag('config', 'G-XXXXXXXXXX');
+</script>
+
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./login.css" />
+    <link rel="stylesheet" href="/reset.css/reset.css" />
+    <title>판다마켓 로그인</title>
+  </head>
+  <body class="body">
+    <section class="login-sec">
+      <div class="home-wrapper">
+        <div class="market-logo">
+          <a href="/">
+            <img
+              src="/header-img/login-header.png"
+              alt="판다마켓"
+              class="logo-img"
+            />
+          </a>
+        </div>
+        <div class="logo-text">
+          <a href="/" class="logo-text">판다마켓</a>
+        </div>
+      </div>
+
+      <form class="login-form">
+        <!-- 이메일 입력 -->
+          <div class="input-group">
+            <label for="email" class="form-label">이메일</label>
+            <input id="email" class="form-input" type="email" name="email" placeholder="이메일을 입력해주세요" pattern=".+@gmail\.com" autocomplete="on" required="">
+          </div>          
+          <!-- 비밀번호 입력 -->
+             <div class="input-group">
+            <label for="password" class="form-label">비밀번호</label>
+          <div class="pwinput-group">
+            <div class="pw-wrapper">
+  <input id="password" class="form-input" type="password" name="password" 
+         placeholder="비밀번호를 입력해주세요" autocomplete="on" required>
+  <button type="button" class="visible-btn" onclick="togglePassword()">
+
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M73 39.1C63.6 29.7 48.4 29.7 39.1 39.1C29.8 48.5 29.7 63.7 39 73.1L567 601.1C576.4 610.5 591.6 610.5 600.9 601.1C610.2 591.7 610.3 576.5 600.9 567.2L504.5 470.8C507.2 468.4 509.9 466 512.5 463.6C559.3 420.1 590.6 368.2 605.5 332.5C608.8 324.6 608.8 315.8 605.5 307.9C590.6 272.2 559.3 220.2 512.5 176.8C465.4 133.1 400.7 96.2 319.9 96.2C263.1 96.2 214.3 114.4 173.9 140.4L73 39.1zM208.9 175.1C241 156.2 278.1 144 320 144C385.2 144 438.8 173.6 479.9 211.7C518.4 247.4 545 290 558.5 320C544.9 350 518.3 392.5 479.9 428.3C476.8 431.1 473.7 433.9 470.5 436.7L425.8 392C439.8 371.5 448 346.7 448 320C448 249.3 390.7 192 320 192C293.3 192 268.5 200.2 248 214.2L208.9 175.1zM390.9 357.1L282.9 249.1C294 243.3 306.6 240 320 240C364.2 240 400 275.8 400 320C400 333.4 396.7 346 390.9 357.1zM135.4 237.2L101.4 203.2C68.8 240 46.4 279 34.5 307.7C31.2 315.6 31.2 324.4 34.5 332.3C49.4 368 80.7 420 127.5 463.4C174.6 507.1 239.3 544 320.1 544C357.4 544 391.3 536.1 421.6 523.4L384.2 486C364.2 492.4 342.8 496 320 496C254.8 496 201.2 466.4 160.1 428.3C121.6 392.6 95 350 81.5 320C91.9 296.9 110.1 266.4 135.5 237.2z"/></svg>
+              </button>
+</div>
+
+
+            </div>
+          </div>
+          <li class="login-btn">로그인</li>
+      </div>
+
+      <div class="link-out">
+        <div class="nav">
+          <div class="simple-in">간편 로그인하기</div>
+          <div class="favicon">
+            <div class="google-fav">
+              <a href="https://www.google.com/">
+                <img
+                  src="/Login/google-favicon.png"
+                  alt="google"
+                  class="google-fav"
+                />
+              </a>
+            </div>
+            <div class="kakao-fav">
+              <a href="https://www.kakaocorp.com/page/">
+                <img
+                  src="/Login/kakao-favicon.png"
+                  alt="카카오톡"
+                  class="kakao-fav"
+                />
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="signup-link">
+        <ul class="text-wrapper">
+          <li class="text1">판다마켓이 처음이신가요?</li>
+          <li class="link-signup">
+            <a href="/Login/singup.html" class="signup-link">회원가입</a>
+          </li>
+        </ul>
+      </div>
+    </section>
+  </body>
+</html>