diff --git a/reset.css b/reset.css
new file mode 100644
index 00000000..45a05ecf
--- /dev/null
+++ b/reset.css
@@ -0,0 +1,129 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: "";
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
diff --git a/sprint3/commod-form.css b/sprint3/commod-form.css
new file mode 100644
index 00000000..0551ea60
--- /dev/null
+++ b/sprint3/commod-form.css
@@ -0,0 +1,106 @@
+* {
+  box-sizing: border-box;
+  font-family: "Pretendard Variable", sans-serif;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  background-color: #fcfcfc;
+  color: #1f2937;
+}
+
+.flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  text-align: left;
+  margin-bottom: 20px;
+}
+
+.login-container {
+  max-width: 640px;
+  margin: 80px auto;
+  padding: 40px 30px;
+  text-align: center;
+}
+
+.logo {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 30px;
+}
+
+.logo img {
+  height: 104px;
+  object-fit: contain;
+}
+
+label {
+  display: block;
+  font-size: 18px;
+  margin-bottom: 16px;
+  font-weight: 700;
+}
+
+.input-wrapper {
+  position: relative;
+}
+
+.input-wrapper input {
+  width: 100%;
+  padding: 12px 40px 12px 12px;
+  border: none;
+  background: #f3f4f6;
+  border-radius: 8px;
+  font-size: 15px;
+}
+
+.divider-box {
+  background-color: #e6f2ff;
+  height: 74px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 23px;
+  margin-top: 24px;
+  border-radius: 8px;
+}
+
+.divider {
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.social-login {
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+}
+
+.eye-icon {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+  width: 24px;
+  height: 24px;
+}
+
+.social-login img {
+  width: 36px;
+  height: 36px;
+  cursor: pointer;
+}
+
+.social-login a {
+  width: 42px;
+  height: 42px;
+}
diff --git a/sprint3/img/Component 2.png b/sprint3/img/Component 2.png
new file mode 100644
index 00000000..64db8acb
Binary files /dev/null and b/sprint3/img/Component 2.png differ
diff --git a/sprint3/img/Component 3.png b/sprint3/img/Component 3.png
new file mode 100644
index 00000000..d38e36cc
Binary files /dev/null and b/sprint3/img/Component 3.png differ
diff --git a/sprint3/img/Img_home_01.png b/sprint3/img/Img_home_01.png
new file mode 100644
index 00000000..ba4fb615
Binary files /dev/null and b/sprint3/img/Img_home_01.png differ
diff --git a/sprint3/img/Img_home_02.png b/sprint3/img/Img_home_02.png
new file mode 100644
index 00000000..8a6d6b54
Binary files /dev/null and b/sprint3/img/Img_home_02.png differ
diff --git a/sprint3/img/Img_home_03.png b/sprint3/img/Img_home_03.png
new file mode 100644
index 00000000..6712b443
Binary files /dev/null and b/sprint3/img/Img_home_03.png differ
diff --git a/sprint3/img/Img_home_bottom.png b/sprint3/img/Img_home_bottom.png
new file mode 100644
index 00000000..ddf1e713
Binary files /dev/null and b/sprint3/img/Img_home_bottom.png differ
diff --git a/sprint3/img/Img_home_top.png b/sprint3/img/Img_home_top.png
new file mode 100644
index 00000000..ea6d9490
Binary files /dev/null and b/sprint3/img/Img_home_top.png differ
diff --git a/sprint3/img/Vector.png b/sprint3/img/Vector.png
new file mode 100644
index 00000000..36b751a4
Binary files /dev/null and b/sprint3/img/Vector.png differ
diff --git a/sprint3/img/btn_visibility_on_24px (1).png b/sprint3/img/btn_visibility_on_24px (1).png
new file mode 100644
index 00000000..a4ad23f0
Binary files /dev/null and b/sprint3/img/btn_visibility_on_24px (1).png differ
diff --git a/sprint3/img/btn_visibility_on_24px.png b/sprint3/img/btn_visibility_on_24px.png
new file mode 100644
index 00000000..0637b1f3
Binary files /dev/null and b/sprint3/img/btn_visibility_on_24px.png differ
diff --git a/sprint3/img/ic_facebook.png b/sprint3/img/ic_facebook.png
new file mode 100644
index 00000000..58333d45
Binary files /dev/null and b/sprint3/img/ic_facebook.png differ
diff --git a/sprint3/img/ic_instagram.png b/sprint3/img/ic_instagram.png
new file mode 100644
index 00000000..7a91d111
Binary files /dev/null and b/sprint3/img/ic_instagram.png differ
diff --git a/sprint3/img/ic_youtube.png b/sprint3/img/ic_youtube.png
new file mode 100644
index 00000000..f51731d4
Binary files /dev/null and b/sprint3/img/ic_youtube.png differ
diff --git a/sprint3/img/logo.png b/sprint3/img/logo.png
new file mode 100644
index 00000000..3a755608
Binary files /dev/null and b/sprint3/img/logo.png differ
diff --git a/sprint3/img/mobile-logo.png b/sprint3/img/mobile-logo.png
new file mode 100644
index 00000000..4510b03d
Binary files /dev/null and b/sprint3/img/mobile-logo.png differ
diff --git a/sprint3/reset.css b/sprint3/reset.css
new file mode 100644
index 00000000..45a05ecf
--- /dev/null
+++ b/sprint3/reset.css
@@ -0,0 +1,129 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: "";
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
diff --git a/sprint3/rw-commod.css b/sprint3/rw-commod.css
new file mode 100644
index 00000000..50db5e4d
--- /dev/null
+++ b/sprint3/rw-commod.css
@@ -0,0 +1,64 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  list-style: none;
+  text-decoration: none;
+}
+
+body {
+  background-color: #fff;
+  font-family: "Pretendard Variable", sans-serif;
+  color: #374151;
+  overflow-x: hidden;
+}
+
+.flex-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+button {
+  color: white;
+  border: none;
+  cursor: pointer;
+}
+
+section {
+  width: 100vw;
+}
+
+:root {
+  --color-primary: #3399ff;
+  --color-primary-dark: #1b62a9;
+  --color-text: #374151;
+  --color-text-light: #8b929e;
+  --color-background: #fcfcfc;
+  --color-background-dark: #111827;
+  --color-banner: #cfe5ff;
+
+  --container-width: 1120px;
+  --header-height: 70px;
+  --footer-height: 160px;
+
+  --spacing-xs: 12px;
+  --spacing-sm: 24px;
+  --spacing-md: 32px;
+  --spacing-lg: 60px;
+  --spacing-xl: 138px;
+}
+
+/* 공통 버튼 스타일 */
+.btn-primary {
+  background-color: var(--color-primary);
+  color: white;
+  border: none;
+  border-radius: 40px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.btn-primary:hover {
+  background-color: var(--color-primary-dark);
+}
diff --git a/sprint3/rw-index.html b/sprint3/rw-index.html
new file mode 100644
index 00000000..9f909b6b
--- /dev/null
+++ b/sprint3/rw-index.html
@@ -0,0 +1,187 @@
+<!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"
+      as="style"
+      crossorigin
+      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"
+    />
+    <link rel="stylesheet" href="reset.css" />
+    <link rel="stylesheet" href="rw-commod.css" />
+    <link rel="stylesheet" href="rw-style.css" />
+  </head>
+  <body>
+    <header>
+      <div class="gnb">
+        <div class="gnb-inner">
+          <a href="/" aria-label="홈으로 이동" rel="noopener noreferrer">
+            <img src="img/logo.png" alt="판다마켓 로고" />
+          </a>
+          <a href="/login" class="login" aria-label="로그인 페이지로 이동">
+            로그인
+          </a>
+        </div>
+      </div>
+    </header>
+    <main>
+      <!-- section01 -->
+      <section>
+        <div class="background-blue flex-content" id="section-top">
+          <div class="top">
+            <h1>
+              일상의 모든 물건을<br />
+              거래해 보세요
+            </h1>
+
+            <button
+              type="button"
+              onclick="location.href='/items'"
+              aria-label="구경하기로 이동"
+              rel="noopener noreferrer"
+            >
+              구경하러 가기
+            </button>
+          </div>
+          <img
+            class="home-top"
+            src="img/Img_home_top.png"
+            alt="동네 한 중심에 있는 판다가 손 흔들고 있는 이미지"
+          />
+        </div>
+      </section>
+
+      <!-- section02 -->
+      <section class="content-box">
+        <div class="content">
+          <img
+            src="img/Img_home_01.png"
+            alt="두 판다가 셔츠를 구경하고 있는 이미지"
+          />
+          <div class="section-text">
+            <h2>Hot item</h2>
+            <h1>
+              인기 상품을<br />
+              확인해 보세요
+            </h1>
+            <p>
+              가장 HOT한 중고거래 물품을<br />
+              판다 마켓에서 확인해보세요
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <!-- section03 -->
+      <section class="content-box">
+        <div class="content" id="content-reverse">
+          <div class="section-text" id="section03-text">
+            <h2>Search</h2>
+            <h1>
+              구매를 원하는<br />
+              상품을 검색하세요
+            </h1>
+            <p>
+              구매하고 싶은 물품은 검색해서<br />
+              쉽게 찾아보세요!
+            </p>
+          </div>
+          <img
+            src="img/Img_home_02.png"
+            alt="돋보기로 상품을 검색하고 있는 이미지"
+          />
+        </div>
+      </section>
+
+      <!--section04-->
+      <section class="content-box" id="content-lastbox">
+        <div class="content">
+          <img
+            src="img/Img_home_03.png"
+            alt="판매상품을 요술봉으로 등록하고 있는 모습"
+          />
+          <div class="section-text">
+            <h2>Register</h2>
+            <h1>
+              판매를 원하는<br />
+              상품을 등록하세요
+            </h1>
+            <p>
+              어떤 물건이든 판매하고 싶은 상품을<br />
+              쉽게 등록하세요
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <!--section05-->
+      <section>
+        <div class="background-blue flex-content" id="section-bottom">
+          <h1>
+            믿을 수 있는<br class="onlyPC" />
+            판다마켓 중고거래
+          </h1>
+          <img
+            class="home-bottom"
+            src="img/Img_home_bottom.png"
+            alt="동네 한 가운데에서 두 판다가 정보를 공유하고 있는 이미지"
+          />
+        </div>
+      </section>
+    </main>
+
+    <footer>
+      <div class="fct">
+        <p>&copy;codeit - 2024</p>
+        <div class="fnav">
+          <button type="button" onclick="location.href='/privacy'">
+            Privacy Policy
+          </button>
+          <button type="button" onclick="location.href='/faq'">FAQ</button>
+        </div>
+
+        <ul>
+          <li>
+            <a
+              href="https://facebook.com"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <img src="img/ic_facebook.png" alt="페이스북 로고" />
+            </a>
+          </li>
+          <li>
+            <a
+              href="https://twitter.com"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <img src="img/Vector.png" alt="트위터 로고" />
+            </a>
+          </li>
+          <li>
+            <a
+              href="https://youtube.com"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <img src="img/ic_youtube.png" alt="유튜브 로고" />
+            </a>
+          </li>
+          <li>
+            <a
+              href="https://instagram.com"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <img src="img/ic_instagram.png" alt="인스타 로고" />
+            </a>
+          </li>
+        </ul>
+      </div>
+    </footer>
+  </body>
+</html>
diff --git a/sprint3/rw-style.css b/sprint3/rw-style.css
new file mode 100644
index 00000000..177ebb85
--- /dev/null
+++ b/sprint3/rw-style.css
@@ -0,0 +1,411 @@
+button {
+  color: white;
+  border: none;
+  cursor: pointer;
+}
+
+.gnb {
+  width: 100%;
+  height: 70px;
+  display: flex;
+  justify-content: center; /* 내부 gnb-inner 중앙 정렬 */
+  position: fixed; /* 상단바 고정 */
+  top: 0;
+  left: 0;
+  z-index: 1000; /* 다른 요소보다 위에 보이도록 */
+  background-color: #fff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.gnb-inner {
+  width: 100%;
+  /* 1920 - 400(양쪽 여백) */
+  max-width: 1520px;
+  padding-left: clamp(40px, 10vw, 200px);
+  padding-right: clamp(40px, 10vw, 200px);
+
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.gnb img {
+  height: 40px;
+  display: block;
+}
+
+.login {
+  background-color: #3399ff;
+  padding: 11px 43px;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 600;
+  color: white;
+}
+
+.login:hover {
+  background-color: #1b62a9;
+}
+
+.background-blue {
+  background-color: #cfe5ff;
+  height: 540px;
+}
+
+.background-blue h1 {
+  font-size: 40px;
+  font-weight: 700;
+  margin-bottom: 20px;
+}
+
+.background-blue button {
+  padding: 12px 124px;
+  background-color: #3399ff;
+  font-size: 20px;
+  font-weight: 600;
+  border-radius: 40px;
+  margin-top: 32px;
+}
+
+.background-blue button:hover {
+  background-color: #1b62a9;
+}
+
+.top {
+  z-index: 1;
+}
+
+.home-top {
+  margin-top: 200px;
+  max-width: 746px;
+}
+
+main {
+  background-color: #fcfcfc;
+}
+
+.content-box {
+  padding-top: 138px;
+  background-color: #fff;
+}
+
+#content-lastbox {
+  margin-bottom: 138px;
+}
+
+.content {
+  display: flex;
+  width: 100%;
+  max-width: 988px;
+  height: auto;
+  margin: 0 auto;
+  border-radius: 12px;
+  background-color: #fcfcfc;
+  justify-content: space-around;
+}
+
+#section03-text {
+  text-align: right;
+}
+
+.section-text h1 {
+  margin-top: 12px;
+  margin-bottom: 24px;
+  font-size: clamp(24px, 2.6vw, 40px);
+  font-weight: 700;
+}
+
+.section-text h2 {
+  margin-top: 103px;
+  color: #3399ff;
+  font-weight: 700;
+  font-size: 18px;
+}
+
+.section-text p {
+  font-weight: 500;
+  font-size: clamp(18px, 1.5vw, 24px);
+}
+
+.home-bottom {
+  margin-top: 145px;
+  overflow: hidden;
+}
+
+footer {
+  height: 160px;
+  width: 100vw;
+  background-color: #111827;
+}
+
+.fct {
+  width: 100%;
+  max-width: 1120px;
+  padding-top: 32.5px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.fct p {
+  color: #8b929e;
+  font-size: clamp(12px, 1vw, 16px);
+  font-weight: 400;
+  order: 0;
+}
+
+.fnav {
+  display: flex;
+  background-color: inherit;
+  color: #fff;
+  gap: 30px;
+}
+
+.fnav button {
+  background-color: inherit;
+  font-size: 16px;
+  font-weight: 400;
+}
+
+.fct ul {
+  display: flex;
+  gap: 12px;
+}
+
+.fct li {
+  overflow: hidden;
+  width: 20px;
+  height: 20px;
+}
+
+.fct a {
+  display: block;
+}
+
+@media (min-width: 375px) and (max-width: 767px) {
+  .section {
+    width: 100%;
+  }
+
+  .login {
+    height: 48px;
+    line-height: 27px;
+  }
+
+  /* 헤더 좌우 여백 */
+  .gnb-inner {
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+
+  .gnb-inner img {
+    content: url("img/mobile-logo.png");
+    height: 53px;
+  }
+
+  #section-top {
+    margin-top: 70px;
+    height: 540px;
+  }
+
+  .top {
+    margin-top: 48px;
+  }
+
+  /* background-blue 영역: 버튼이 이미지 위 */
+  .background-blue {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    justify-content: space-between;
+  }
+
+  .background-blue .home-top {
+    margin-top: 24px;
+    width: 80%;
+  }
+
+  #section-bottom h1 {
+    margin-top: 121px;
+  }
+
+  .home-bottom {
+    margin-top: 0;
+    width: 80%;
+  }
+
+  .background-blue button {
+    margin-top: 16px;
+    padding: 12px 90px;
+  }
+
+  /* 콘텐츠 세로 정렬 */
+  .content {
+    flex-direction: column;
+    /* align-items: center; */
+    padding: 0 16px;
+    /* text-align: center; */
+  }
+
+  #content-reverse {
+    flex-direction: column-reverse;
+  }
+
+  .content img {
+    width: 100%;
+    margin-top: 24px;
+  }
+
+  .section-text h1 {
+    font-size: 2.5rem;
+    margin-top: 16px;
+  }
+
+  .section-text h2 {
+    font-size: 1.5rem;
+    margin-top: 24px;
+  }
+
+  .section-text p {
+    font-size: 1.6rem;
+    margin-top: 24px;
+  }
+
+  footer {
+    width: 100%;
+    height: auto;
+  }
+
+  /* Footer 간격 축소 */
+  .fct {
+    flex-wrap: wrap;
+    gap: 28px;
+    padding: 40px;
+    text-align: center;
+    justify-content: flex-start;
+  }
+
+  .fct button {
+    font-size: 2rem;
+  }
+
+  .fnav {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 80px;
+    justify-content: center;
+  }
+
+  .fct ul {
+    padding-left: 34px;
+    display: flex;
+    gap: 16px;
+    justify-content: center;
+  }
+
+  .fct li {
+    width: 40px;
+    height: 40px;
+  }
+
+  .fct img {
+    height: 40px;
+    width: 40px;
+  }
+
+  .fct p {
+    font-size: 2rem;
+    order: 3; /* 글자가 맨 밑에 오도록 */
+    color: #8b929e;
+  }
+}
+
+/* 태블릿 */
+/* (min-width: 768px) and */
+@media (min-width: 768px) and (max-width: 1199px) {
+  section {
+    width: 100%;
+  }
+  h1 > br {
+    display: none;
+  }
+
+  #section-top {
+    margin-top: 70px;
+    height: 770px;
+  }
+
+  .section-text h1 {
+    font-size: 2.5rem;
+    margin-top: 16px;
+  }
+
+  .section-text h2 {
+    font-size: 1.5rem;
+    margin-top: 24px;
+  }
+
+  .section-text p {
+    font-size: 1.6rem;
+    margin-top: 24px;
+  }
+
+  #section-bottom {
+    height: 927px;
+  }
+
+  #section-bottom > img {
+    margin-top: 217px;
+  }
+
+  .gnb-inner {
+    padding-left: 24px;
+    padding-right: 24px;
+  }
+
+  .gnb img {
+    height: 50px;
+  }
+
+  .background-blue button {
+    margin-top: 16px;
+    padding: 12px 60px;
+  }
+
+  .content {
+    flex-direction: column;
+    padding: 0 24px;
+    text-align: left;
+  }
+
+  .content img {
+    width: 100%;
+    margin-top: 24px;
+  }
+
+  #content-reverse {
+    flex-direction: column-reverse;
+  }
+
+  .flex-content {
+    flex-direction: column;
+    justify-content: flex-end;
+    text-align: center;
+  }
+
+  .onlyPC {
+    display: block;
+  }
+
+  .fct {
+    padding-top: 24px;
+    flex-direction: row;
+    justify-content: space-around;
+  }
+
+  .fnav {
+    gap: 20px;
+  }
+}
diff --git a/sprint3/sprint-mission3-login.css b/sprint3/sprint-mission3-login.css
new file mode 100644
index 00000000..71bd31f3
--- /dev/null
+++ b/sprint3/sprint-mission3-login.css
@@ -0,0 +1,49 @@
+input[type="email"],
+input[type="password"] {
+  width: 100%;
+  padding: 12px;
+  border: none;
+  background: #f3f4f6;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 400;
+  height: 56px;
+}
+
+.login-btn {
+  width: 100%;
+  height: 56px;
+  background-color: #9ca3af;
+  color: #f3f4f6;
+  padding: 12px;
+  border: none;
+  border-radius: 40px;
+  font-size: 20px;
+  font-weight: 600;
+  cursor: pointer;
+  margin-top: 10px;
+}
+
+/* .login-btn:hover {
+  background-color: #02499f;
+} */
+
+.signup-link {
+  margin-top: 24px;
+  font-weight: 600;
+  font-size: 14px;
+  color: #666;
+  font-weight: 500;
+}
+
+.signup-link a {
+  color: #3b82f6;
+  margin-left: 4px;
+}
+
+@media (min-width: 375px) and (max-width: 767px) {
+  .login-container {
+    max-width: 400px;
+    padding: 0 16px;
+  }
+}
diff --git a/sprint3/sprint-mission3-login.html b/sprint3/sprint-mission3-login.html
new file mode 100644
index 00000000..c32e17d4
--- /dev/null
+++ b/sprint3/sprint-mission3-login.html
@@ -0,0 +1,80 @@
+<!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="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"
+    />
+    <link rel="stylesheet" href="reset.css" />
+    <link rel="stylesheet" href="commod-form.css" />
+    <link rel="stylesheet" href="sprint-mission3-login.css" />
+  </head>
+  <body>
+    <div class="login-container">
+      <a href="/" class="logo" aria-label="새로고침" rel="noopener noreferrer">
+        <img src="img/logo.png" alt="판다마켓 로고" />
+      </a>
+
+      <form action="/login" method="POST" class="login-form">
+        <div class="form-group">
+          <label for="email">이메일</label>
+          <input
+            type="email"
+            id="email"
+            name="email"
+            placeholder="codeit@email.com"
+            required
+          />
+        </div>
+
+        <div class="form-group">
+          <label for="password">비밀번호</label>
+          <div class="input-wrapper">
+            <input type="password" id="password" name="password" required />
+            <img
+              src="img/btn_visibility_on_24px.png"
+              alt="비밀번호 보기"
+              id="togglePassword"
+              class="eye-icon"
+            />
+          </div>
+        </div>
+
+        <button type="submit" class="login-btn">로그인</button>
+      </form>
+
+      <div class="divider-box">
+        <div class="divider">간편 로그인하기</div>
+        <div class="social-login">
+          <a
+            class="flex-center"
+            href="https://www.google.com/"
+            aria-label="구글 홈으로 이동"
+            rel="noopener noreferrer"
+            ><img src="img/Component 2.png" alt="구글 로그인"
+          /></a>
+          <a
+            class="flex-center"
+            href="https://www.kakaocorp.com/page/"
+            aria-label="카카오 홈으로 이동"
+            rel="noopener noreferrer"
+            ><img src="img/Component 3.png" alt="카카오 로그인"
+          /></a>
+        </div>
+      </div>
+
+      <p class="signup-link">
+        판다마켓이 처음이신가요?
+        <a
+          href="/signup"
+          aria-label="회원가입으로 이동"
+          rel="noopener noreferrer"
+          >회원가입</a
+        >
+      </p>
+    </div>
+  </body>
+</html>
diff --git a/sprint3/sprint-mission3-signup.css b/sprint3/sprint-mission3-signup.css
new file mode 100644
index 00000000..1a720a6a
--- /dev/null
+++ b/sprint3/sprint-mission3-signup.css
@@ -0,0 +1,61 @@
+input[type="email"],
+input[type="password"],
+input[type="text"] {
+  width: 100%;
+  padding: 12px;
+  border: none;
+  background: #f3f4f6;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 400;
+  height: 56px;
+}
+
+.signup-btn {
+  width: 100%;
+  height: 56px;
+  background-color: #9ca3af;
+  color: #f3f4f6;
+  padding: 12px;
+  border: none;
+  border-radius: 40px;
+  font-size: 20px;
+  font-weight: 600;
+  cursor: pointer;
+  margin-top: 10px;
+}
+
+/* .signup-btn:hover {
+  background-color: #02499f;
+} */
+
+.social-login img {
+  width: 36px;
+  height: 36px;
+  cursor: pointer;
+}
+
+.social-login a {
+  width: 42px;
+  height: 42px;
+}
+
+.login-link {
+  margin-top: 24px;
+  font-weight: 600;
+  font-size: 14px;
+  color: #666;
+  font-weight: 500;
+}
+
+.login-link a {
+  color: #3b82f6;
+  margin-left: 4px;
+}
+
+@media (min-width: 375px) and (max-width: 767px) {
+  .login-container {
+    max-width: 400px;
+    padding: 0 16px;
+  }
+}
diff --git a/sprint3/sprint-mission3-signup.html b/sprint3/sprint-mission3-signup.html
new file mode 100644
index 00000000..d1810e11
--- /dev/null
+++ b/sprint3/sprint-mission3-signup.html
@@ -0,0 +1,108 @@
+<!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="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"
+    />
+    <link rel="stylesheet" href="reset.css" />
+    <link rel="stylesheet" href="commod-form.css" />
+    <link rel="stylesheet" href="sprint-mission3-signup.css" />
+  </head>
+  <body>
+    <div class="login-container">
+      <a href="/" class="logo">
+        <img src="img/logo.png" alt="판다마켓 로고" />
+      </a>
+
+      <form action="/signup" method="POST" class="signup-form">
+        <div class="form-group">
+          <label for="email">이메일</label>
+          <input
+            type="email"
+            id="email"
+            name="email"
+            placeholder="codeit@email.com"
+            required
+          />
+        </div>
+
+        <div class="form-group">
+          <label for="nickname">닉네임</label>
+          <input
+            type="text"
+            id="nickname"
+            name="nickname"
+            placeholder="판다"
+            required
+          />
+        </div>
+
+        <div class="form-group">
+          <label for="password">비밀번호</label>
+          <div class="input-wrapper">
+            <input type="password" id="password" name="password" required />
+            <img
+              src="img/btn_visibility_on_24px.png"
+              alt="비밀번호 보기"
+              id="togglePassword"
+              class="eye-icon"
+            />
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label for="password-check">비밀번호 확인</label>
+          <div class="input-wrapper">
+            <input
+              type="password"
+              id="password-check"
+              name="passwordCheck"
+              required
+            />
+            <img
+              src="img/btn_visibility_on_24px (1).png"
+              alt="비밀번호 보기"
+              id="togglePasswordCheck"
+              class="eye-icon"
+            />
+          </div>
+        </div>
+
+        <button type="submit" class="signup-btn">회원가입</button>
+      </form>
+
+      <div class="divider-box">
+        <div class="divider">간편 로그인하기</div>
+        <div class="social-login">
+          <a
+            class="flex-center"
+            href="https://www.google.com/"
+            aria-label="구글 홈 이동"
+            rel="noopener noreferrer"
+          >
+            <img src="img/Component 2.png" alt="구글 로그인" />
+          </a>
+          <a
+            class="flex-center"
+            href="https://www.kakaocorp.com/page/"
+            aria-label="카카오 홈 이동"
+            rel="noopener noreferrer"
+          >
+            <img src="img/Component 3.png" alt="카카오 로그인" />
+          </a>
+        </div>
+      </div>
+
+      <p class="login-link">
+        이미 회원이신가요?
+        <a href="/login" aria-label="로그인으로 이동" rel="noopener noreferrer">
+          로그인
+        </a>
+      </p>
+    </div>
+  </body>
+</html>
diff --git a/sprint4/commod-form.css b/sprint4/commod-form.css
new file mode 100644
index 00000000..3ded1edf
--- /dev/null
+++ b/sprint4/commod-form.css
@@ -0,0 +1,106 @@
+* {
+  box-sizing: border-box;
+  font-family: "Pretendard Variable", sans-serif;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  background-color: #fcfcfc;
+  color: #1f2937;
+}
+
+.flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  text-align: left;
+  margin-bottom: 20px;
+}
+
+.login-container {
+  max-width: 640px;
+  margin: 80px auto;
+  padding: 0px 30px;
+  text-align: center;
+}
+
+.logo {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 30px;
+}
+
+.logo img {
+  height: 104px;
+  object-fit: contain;
+}
+
+label {
+  display: block;
+  font-size: 18px;
+  margin-bottom: 16px;
+  font-weight: 700;
+}
+
+.input-wrapper {
+  position: relative;
+}
+
+.input-wrapper input {
+  width: 100%;
+  padding: 12px 40px 12px 12px;
+  border: none;
+  background: #f3f4f6;
+  border-radius: 8px;
+  font-size: 15px;
+}
+
+.divider-box {
+  background-color: #e6f2ff;
+  height: 74px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 23px;
+  margin-top: 24px;
+  border-radius: 8px;
+}
+
+.divider {
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.social-login {
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+}
+
+.eye-icon {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+  width: 24px;
+  height: 24px;
+}
+
+.social-login img {
+  width: 36px;
+  height: 36px;
+  cursor: pointer;
+}
+
+.social-login a {
+  width: 42px;
+  height: 42px;
+}
diff --git a/sprint4/img/Component 2.png b/sprint4/img/Component 2.png
new file mode 100644
index 00000000..64db8acb
Binary files /dev/null and b/sprint4/img/Component 2.png differ
diff --git a/sprint4/img/Component 3.png b/sprint4/img/Component 3.png
new file mode 100644
index 00000000..d38e36cc
Binary files /dev/null and b/sprint4/img/Component 3.png differ
diff --git a/sprint4/img/Img_home_01.png b/sprint4/img/Img_home_01.png
new file mode 100644
index 00000000..ba4fb615
Binary files /dev/null and b/sprint4/img/Img_home_01.png differ
diff --git a/sprint4/img/Img_home_02.png b/sprint4/img/Img_home_02.png
new file mode 100644
index 00000000..8a6d6b54
Binary files /dev/null and b/sprint4/img/Img_home_02.png differ
diff --git a/sprint4/img/Img_home_03.png b/sprint4/img/Img_home_03.png
new file mode 100644
index 00000000..6712b443
Binary files /dev/null and b/sprint4/img/Img_home_03.png differ
diff --git a/sprint4/img/Img_home_bottom.png b/sprint4/img/Img_home_bottom.png
new file mode 100644
index 00000000..ddf1e713
Binary files /dev/null and b/sprint4/img/Img_home_bottom.png differ
diff --git a/sprint4/img/Img_home_top.png b/sprint4/img/Img_home_top.png
new file mode 100644
index 00000000..ea6d9490
Binary files /dev/null and b/sprint4/img/Img_home_top.png differ
diff --git a/sprint4/img/Vector.png b/sprint4/img/Vector.png
new file mode 100644
index 00000000..36b751a4
Binary files /dev/null and b/sprint4/img/Vector.png differ
diff --git a/sprint4/img/btn_visibility_off_24px.png b/sprint4/img/btn_visibility_off_24px.png
new file mode 100644
index 00000000..a4ad23f0
Binary files /dev/null and b/sprint4/img/btn_visibility_off_24px.png differ
diff --git a/sprint4/img/btn_visibility_on_24px.png b/sprint4/img/btn_visibility_on_24px.png
new file mode 100644
index 00000000..0637b1f3
Binary files /dev/null and b/sprint4/img/btn_visibility_on_24px.png differ
diff --git a/sprint4/img/ic_facebook.png b/sprint4/img/ic_facebook.png
new file mode 100644
index 00000000..58333d45
Binary files /dev/null and b/sprint4/img/ic_facebook.png differ
diff --git a/sprint4/img/ic_instagram.png b/sprint4/img/ic_instagram.png
new file mode 100644
index 00000000..7a91d111
Binary files /dev/null and b/sprint4/img/ic_instagram.png differ
diff --git a/sprint4/img/ic_youtube.png b/sprint4/img/ic_youtube.png
new file mode 100644
index 00000000..f51731d4
Binary files /dev/null and b/sprint4/img/ic_youtube.png differ
diff --git a/sprint4/img/logo.png b/sprint4/img/logo.png
new file mode 100644
index 00000000..3a755608
Binary files /dev/null and b/sprint4/img/logo.png differ
diff --git a/sprint4/img/mobile-logo.png b/sprint4/img/mobile-logo.png
new file mode 100644
index 00000000..4510b03d
Binary files /dev/null and b/sprint4/img/mobile-logo.png differ
diff --git a/sprint4/items.html b/sprint4/items.html
new file mode 100644
index 00000000..2dacbde4
--- /dev/null
+++ b/sprint4/items.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <title>판다마켓 - 상품 리스트</title>
+  </head>
+
+  <body>
+    <h1>임시 상품 리스트 페이지</h1>
+  </body>
+</html>
diff --git a/sprint4/reset.css b/sprint4/reset.css
new file mode 100644
index 00000000..45a05ecf
--- /dev/null
+++ b/sprint4/reset.css
@@ -0,0 +1,129 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: "";
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
diff --git a/sprint4/sprint-mission4-login.css b/sprint4/sprint-mission4-login.css
new file mode 100644
index 00000000..e090605e
--- /dev/null
+++ b/sprint4/sprint-mission4-login.css
@@ -0,0 +1,56 @@
+input[type="email"],
+input[type="password"] {
+  width: 100%;
+  padding: 12px;
+  border: none;
+  background: #f3f4f6;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 400;
+  height: 56px;
+}
+
+.error-message {
+  color: #f74747;
+  font-weight: 600;
+  font-size: 15px;
+  line-height: 18px;
+  margin-top: 8px;
+  display: none;
+  padding-left: 16px;
+}
+
+
+.login-btn {
+  width: 100%;
+  height: 56px;
+  background-color: #9ca3af;
+  color: #f3f4f6;
+  padding: 12px;
+  border: none;
+  border-radius: 40px;
+  font-size: 20px;
+  font-weight: 600;
+  cursor: pointer;
+  margin-top: 10px;
+}
+
+.signup-link {
+  margin-top: 24px;
+  font-weight: 600;
+  font-size: 14px;
+  color: #666;
+  font-weight: 500;
+}
+
+.signup-link a {
+  color: #3b82f6;
+  margin-left: 4px;
+}
+
+@media (min-width: 375px) and (max-width: 767px) {
+  .login-container {
+    max-width: 400px;
+    padding: 0 16px;
+  }
+}
diff --git a/sprint4/sprint-mission4-login.html b/sprint4/sprint-mission4-login.html
new file mode 100644
index 00000000..46684178
--- /dev/null
+++ b/sprint4/sprint-mission4-login.html
@@ -0,0 +1,95 @@
+<!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="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"
+    />
+    <link rel="stylesheet" href="reset.css" />
+    <link rel="stylesheet" href="commod-form.css" />
+    <link rel="stylesheet" href="sprint-mission4-login.css" />
+  </head>
+  <body>
+    <div class="login-container">
+      <a href="/" class="logo" aria-label="새로고침" rel="noopener noreferrer">
+        <img src="img/logo.png" alt="판다마켓 로고" />
+      </a>
+
+      <form action="/login" method="POST" class="login-form">
+        <div class="form-group">
+          <label for="email">이메일</label>
+          <input
+            type="email"
+            id="email"
+            name="email"
+            placeholder="codeit@email.com"
+            required
+          />
+          <span id="emailEmptyError" class="error-message"
+            >이메일을 입력해 주세요</span
+          >
+          <span id="emailInvalidError" class="error-message"
+            >잘못된 이메일 형식입니다</span
+          >
+        </div>
+
+        <div class="form-group">
+          <label for="password">비밀번호</label>
+          <div class="input-wrapper">
+            <input type="password" id="password" name="password" required />
+            <img
+              src="img/btn_visibility_on_24px.png"
+              alt="비밀번호 보기"
+              id="togglePassword"
+              class="eye-icon"
+            />
+          </div>
+          <span id="passwordEmptyError" class="error-message"
+          >비밀번호를 입력해 주세요</span
+        >
+        <span id="passwordInvalidError" class="error-message"
+          >비밀번호를 8자 이상 입력해 주세요</span
+        >
+        </div>
+
+        <button type="submit" class="login-btn">로그인</button>
+      </form>
+
+      <div class="divider-box">
+        <div class="divider">간편 로그인하기</div>
+        <div class="social-login">
+          <a
+            class="flex-center"
+            href="https://www.google.com/"
+            aria-label="구글 홈으로 이동"
+            rel="noopener noreferrer"
+            ><img src="img/Component 2.png" alt="구글 로그인"
+          /></a>
+          <a
+            class="flex-center"
+            href="https://www.kakaocorp.com/page/"
+            aria-label="카카오 홈으로 이동"
+            rel="noopener noreferrer"
+            ><img src="img/Component 3.png" alt="카카오 로그인"
+          /></a>
+        </div>
+      </div>
+
+      <p class="signup-link">
+        판다마켓이 처음이신가요?
+        <a
+          href="/signup"
+          aria-label="회원가입으로 이동"
+          rel="noopener noreferrer"
+          >회원가입</a
+        >
+      </p>
+    </div>
+
+    <script src="sprint-mission4-login.js"></script>
+
+  </body>
+</html>
diff --git a/sprint4/sprint-mission4-login.js b/sprint4/sprint-mission4-login.js
new file mode 100644
index 00000000..d7785e30
--- /dev/null
+++ b/sprint4/sprint-mission4-login.js
@@ -0,0 +1,126 @@
+// 요소 가져오기
+const emailInput = document.getElementById('email');
+const passwordInput = document.getElementById('password');
+const loginButton = document.querySelector('.login-btn');
+const togglePasswordButton = document.getElementById('togglePassword');
+
+// 에러 메시지 요소
+const emailEmptyError = document.getElementById('emailEmptyError');
+const emailInvalidError = document.getElementById('emailInvalidError');
+const passwordEmptyError = document.getElementById('passwordEmptyError');
+const passwordInvalidError = document.getElementById('passwordInvalidError');
+
+// 이메일 유효성 검사 함수
+function isValidEmail(email) {
+  const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  return emailPattern.test(email);
+}
+
+// 전체 폼 검증 함수
+function validateForm() {
+  let isValid = true;
+
+  // 이메일 검증
+  const emailValue = emailInput.value.trim();
+  if (emailValue === '') {
+    showError(emailInput, emailEmptyError);
+    hideError(emailInvalidError);
+    isValid = false;
+  } else if (!isValidEmail(emailValue)) {
+    showError(emailInput, emailInvalidError);
+    hideError(emailEmptyError);
+    isValid = false;
+  } else {
+    hideError(emailEmptyError);
+    hideError(emailInvalidError);
+    clearBorder(emailInput);
+  }
+
+  // 비밀번호 검증
+  const passwordValue = passwordInput.value;
+  if (passwordValue === '') {
+    showError(passwordInput, passwordEmptyError);
+    hideError(passwordInvalidError);
+    isValid = false;
+  } else if (passwordValue.length < 8) {
+    showError(passwordInput, passwordInvalidError);
+    hideError(passwordEmptyError);
+    isValid = false;
+  } else {
+    hideError(passwordEmptyError);
+    hideError(passwordInvalidError);
+    clearBorder(passwordInput);
+  }
+
+  // 로그인 버튼 상태
+  setLoginButtonState(isValid);
+
+  // 결과 반환
+  return isValid;
+}
+
+// 에러 표시 함수
+function showError(input, errorElement) {
+  input.style.border = '1px solid #f74747';
+  errorElement.style.display = 'block';
+}
+
+// 에러 숨기기 함수
+function hideError(errorElement) {
+  errorElement.style.display = 'none';
+}
+
+// 테두리 초기화
+function clearBorder(input) {
+  input.style.border = 'none';
+}
+
+// 로그인 버튼 활성화/비활성화
+function setLoginButtonState(isActive) {
+  if (isActive) {
+    loginButton.disabled = false;
+    loginButton.style.backgroundColor = '#3b82f6';
+  } else {
+    loginButton.disabled = true;
+    loginButton.style.backgroundColor = '#9ca3af';
+  }
+}
+
+// 포커스 아웃 이벤트로 검증
+emailInput.addEventListener('blur', validateForm);
+passwordInput.addEventListener('blur', validateForm);
+
+// 입력 중에도 버튼 상태 체크
+emailInput.addEventListener('input', validateForm);
+passwordInput.addEventListener('input', validateForm);
+
+// 로그인 버튼 클릭
+loginButton.addEventListener('click', function (e) {
+  e.preventDefault(); // 기본 이동 막기
+
+  // 최종 검증 다시 실행
+  const isFormValid = validateForm();
+
+  // 유효할 때만 이동
+  if (isFormValid) {
+    window.location.href = 'items.html';
+  }
+});
+
+// 비밀번호 보기/숨기기 토글
+togglePasswordButton.addEventListener('click', function () {
+  const isPasswordVisible = passwordInput.type === 'text';
+
+  // 비밀번호 타입 토글
+  passwordInput.type = isPasswordVisible ? 'password' : 'text';
+
+  // 아이콘 이미지 변경
+  togglePasswordButton.src = isPasswordVisible 
+    ? 'img/btn_visibility_on_24px.png' // 가려진 상태
+    : 'img/btn_visibility_off_24px.png'; // 보이는 상태
+
+  // alt 텍스트 변경 (웹 접근성)
+  togglePasswordButton.alt = isPasswordVisible 
+    ? '비밀번호 숨기기'
+    : '비밀번호 보기';
+});
diff --git a/sprint4/sprint-mission4-signup.css b/sprint4/sprint-mission4-signup.css
new file mode 100644
index 00000000..43053aa9
--- /dev/null
+++ b/sprint4/sprint-mission4-signup.css
@@ -0,0 +1,67 @@
+input[type="email"],
+input[type="password"],
+input[type="text"] {
+  width: 100%;
+  padding: 12px;
+  border: none;
+  background: #f3f4f6;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 400;
+  height: 56px;
+}
+
+.error-message {
+  color: #f74747;
+  font-weight: 600;
+  font-size: 15px;
+  line-height: 18px;
+  margin-top: 8px;
+  display: none;
+  padding-left: 16px;
+}
+
+.signup-btn {
+  width: 100%;
+  height: 56px;
+  background-color: #9ca3af;
+  color: #f3f4f6;
+  padding: 12px;
+  border: none;
+  border-radius: 40px;
+  font-size: 20px;
+  font-weight: 600;
+  cursor: pointer;
+  margin-top: 10px;
+}
+
+.social-login img {
+  width: 36px;
+  height: 36px;
+  cursor: pointer;
+}
+
+.social-login a {
+  width: 42px;
+  height: 42px;
+}
+
+.login-link {
+  margin-top: 24px;
+  font-weight: 600;
+  font-size: 14px;
+  color: #666;
+  font-weight: 500;
+}
+
+.login-link a {
+  color: #3b82f6;
+  margin-left: 4px;
+}
+
+@media (min-width: 375px) and (max-width: 767px) {
+  .login-container {
+    max-width: 400px;
+    padding: 0 16px;
+  }
+}
diff --git a/sprint4/sprint-mission4-signup.html b/sprint4/sprint-mission4-signup.html
new file mode 100644
index 00000000..f5ae18ad
--- /dev/null
+++ b/sprint4/sprint-mission4-signup.html
@@ -0,0 +1,129 @@
+<!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="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"
+    />
+    <link rel="stylesheet" href="reset.css" />
+    <link rel="stylesheet" href="commod-form.css" />
+    <link rel="stylesheet" href="sprint-mission4-signup.css" />
+  </head>
+  <body>
+    <div class="login-container">
+      <a href="/" class="logo">
+        <img src="img/logo.png" alt="판다마켓 로고" />
+      </a>
+
+      <form action="/signup" method="POST" class="signup-form">
+        <div class="form-group">
+          <label for="email">이메일</label>
+          <input
+            type="email"
+            id="email"
+            name="email"
+            placeholder="codeit@email.com"
+            required
+          />
+
+          <span id="emailEmptyError" class="error-message"
+          >이메일을 입력해 주세요</span
+        >
+        <span id="emailInvalidError" class="error-message"
+          >잘못된 이메일 형식입니다</span
+        >
+        </div>
+
+        <div class="form-group">
+          <label for="nickname">닉네임</label>
+          <input
+            type="text"
+            id="nickname"
+            name="nickname"
+            placeholder="판다"
+            required
+          />
+          <span id="nicknameEmptyError" class="error-message">
+            닉네임을 입력해주세요.
+          </span>
+        </div>
+
+        <div class="form-group">
+          <label for="password">비밀번호</label>
+          <div class="input-wrapper">
+            <input type="password" id="password" name="password" required />
+            <img
+              src="img/btn_visibility_on_24px.png"
+              alt="비밀번호 보기"
+              id="togglePassword"
+              class="eye-icon"
+            />
+          </div>
+          <span id="passwordEmptyError" class="error-message"
+          >비밀번호를 입력해 주세요</span
+        >
+        <span id="passwordInvalidError" class="error-message"
+          >비밀번호를 8자 이상 입력해 주세요</span
+        >
+        </div>
+
+        <div class="form-group">
+          <label for="password-check">비밀번호 확인</label>
+          <div class="input-wrapper">
+            <input
+              type="password"
+              id="password-check"
+              name="passwordCheck"
+              required
+            />
+            <img
+            src="img/btn_visibility_on_24px.png"
+            alt="비밀번호 보기"
+            id="togglePasswordCheck"
+            class="eye-icon"
+          />
+          </div>
+          
+          <span id="passwordCheckError" class="error-message"
+          >비밀번호가 일치하지 않습니다.</span
+        >
+        </div>
+
+        <button type="submit" class="signup-btn">회원가입</button>
+      </form>
+
+      <div class="divider-box">
+        <div class="divider">간편 로그인하기</div>
+        <div class="social-login">
+          <a
+            class="flex-center"
+            href="https://www.google.com/"
+            aria-label="구글 홈 이동"
+            rel="noopener noreferrer"
+          >
+            <img src="img/Component 2.png" alt="구글 로그인" />
+          </a>
+          <a
+            class="flex-center"
+            href="https://www.kakaocorp.com/page/"
+            aria-label="카카오 홈 이동"
+            rel="noopener noreferrer"
+          >
+            <img src="img/Component 3.png" alt="카카오 로그인" />
+          </a>
+        </div>
+      </div>
+
+      <p class="login-link">
+        이미 회원이신가요?
+        <a href="/login" aria-label="로그인으로 이동" rel="noopener noreferrer">
+          로그인
+        </a>
+      </p>
+    </div>
+    <script src="sprint-mission4-signup.js"></script>
+  </body>
+</html>
diff --git a/sprint4/sprint-mission4-signup.js b/sprint4/sprint-mission4-signup.js
new file mode 100644
index 00000000..f2acba89
--- /dev/null
+++ b/sprint4/sprint-mission4-signup.js
@@ -0,0 +1,181 @@
+// 요소 가져오기
+const emailInput = document.getElementById('email');
+const passwordInput = document.getElementById('password');
+const signUpButton = document.querySelector('.signup-btn');
+const togglePasswordButton = document.getElementById('togglePassword');
+const toggleCheckButton = document.getElementById('togglePasswordCheck');
+const nickNameInput = document.getElementById('nickname');
+const passwordCheckInput = document.getElementById('password-check');
+
+// 에러 메시지 요소
+const emailEmptyError = document.getElementById('emailEmptyError');
+const emailInvalidError = document.getElementById('emailInvalidError');
+const passwordEmptyError = document.getElementById('passwordEmptyError');
+const passwordInvalidError = document.getElementById('passwordInvalidError');
+const nickNameEmptyError = document.getElementById('nicknameEmptyError');
+const passwordCheckError = document.getElementById('passwordCheckError');
+
+// 이메일 유효성 검사 함수
+function isValidEmail(email) {
+  const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  return emailPattern.test(email);
+}
+
+// 전체 폼 검증 함수
+function validateForm() {
+  let isValid = true;
+
+  // 이메일 검증
+  const emailValue = emailInput.value.trim();
+  if (emailValue === '') {
+    showError(emailInput, emailEmptyError);
+    hideError(emailInvalidError);
+    isValid = false;
+  } else if (!isValidEmail(emailValue)) {
+    showError(emailInput, emailInvalidError);
+    hideError(emailEmptyError);
+    isValid = false;
+  } else {
+    hideError(emailEmptyError);
+    hideError(emailInvalidError);
+    clearBorder(emailInput);
+  }
+
+  // 비밀번호 검증
+  const passwordValue = passwordInput.value;
+  if (passwordValue === '') {
+    showError(passwordInput, passwordEmptyError);
+    hideError(passwordInvalidError);
+    isValid = false;
+  } else if (passwordValue.length < 8) {
+    showError(passwordInput, passwordInvalidError);
+    hideError(passwordEmptyError);
+    isValid = false;
+  } else {
+    hideError(passwordEmptyError);
+    hideError(passwordInvalidError);
+    clearBorder(passwordInput);
+  }
+
+  // 닉네임 검증
+  const nicknameValue = nickNameInput.value;
+  if(nicknameValue === '') {    
+    showError(nickNameInput, nickNameEmptyError);
+    isValid = false;
+  } else {
+      hideError(nickNameEmptyError);
+      clearBorder(nickNameInput);
+  }
+  
+  const passwordCheckValue = passwordCheckInput.value;
+
+  if (passwordCheckValue === '') {
+    // 비밀번호 확인창이 비었을 때
+    showError(passwordCheckInput, passwordCheckError);
+    passwordCheckError.textContent = '비밀번호 확인을 입력해주세요';
+    isValid = false;
+  } else if (passwordCheckValue !== passwordValue) {
+    // 비밀번호와 일치하지 않을 때
+    showError(passwordCheckInput, passwordCheckError);
+    passwordCheckError.textContent = '비밀번호가 일치하지 않습니다';
+    isValid = false;
+  } else {
+    // 통과
+    hideError(passwordCheckError);
+    clearBorder(passwordCheckInput);
+  }
+
+  // 로그인 버튼 상태
+  setLoginButtonState(isValid);
+
+  // 결과 반환
+  return isValid;
+}
+
+// 에러 표시 함수
+function showError(input, errorElement) {
+  input.style.border = '1px solid #f74747';
+  errorElement.style.display = 'block';
+}
+
+// 에러 숨기기 함수
+function hideError(errorElement) {
+  errorElement.style.display = 'none';
+}
+
+// 테두리 초기화
+function clearBorder(input) {
+  input.style.border = 'none';
+}
+
+// 로그인 버튼 활성화/비활성화
+function setLoginButtonState(isActive) {
+  if (isActive) {
+    signUpButton.disabled = false;
+    signUpButton.style.backgroundColor = '#3b82f6';
+  } else {
+    signUpButton.disabled = true;
+    signUpButton.style.backgroundColor = '#9ca3af';
+  }
+}
+
+// 포커스 아웃 이벤트로 검증
+emailInput.addEventListener('blur', validateForm);
+passwordInput.addEventListener('blur', validateForm);
+nickNameInput.addEventListener('blur', validateForm);
+passwordCheckInput.addEventListener('blur', validateForm);
+
+// 입력 중에도 버튼 상태 체크
+emailInput.addEventListener('input', validateForm);
+passwordInput.addEventListener('input', validateForm);
+nickNameInput.addEventListener('input', validateForm);
+passwordCheckInput.addEventListener('input', validateForm);
+
+// 로그인 버튼 클릭
+signUpButton.addEventListener('click', function (e) {
+  e.preventDefault(); // 기본 이동 막기
+
+  // 최종 검증 다시 실행
+  const isFormValid = validateForm();
+
+  // 유효할 때만 이동
+  if (isFormValid) {
+    window.location.href = 'items.html';
+  }
+});
+
+// 비밀번호 보기/숨기기 토글
+togglePasswordButton.addEventListener('click', function () {
+  const isPasswordVisible = passwordInput.type === 'text';
+
+  // 비밀번호 타입 토글
+  passwordInput.type = isPasswordVisible ? 'password' : 'text';
+
+  // 아이콘 이미지 변경
+  togglePasswordButton.src = isPasswordVisible 
+    ? 'img/btn_visibility_on_24px.png' // 가려진 상태
+    : 'img/btn_visibility_off_24px.png'; // 보이는 상태
+
+  // alt 텍스트 변경 (웹 접근성)
+  togglePasswordButton.alt = isPasswordVisible 
+    ? '비밀번호 숨기기'
+    : '비밀번호 보기';
+});
+
+toggleCheckButton.addEventListener('click', function () {
+    const isPasswordCheckVisible = passwordCheckInput.type === 'text';
+  
+    // 비밀번호 확인 input의 타입 바꿈
+    passwordCheckInput.type = isPasswordCheckVisible ? 'password' : 'text';
+  
+    // 아이콘 이미지 변경
+    toggleCheckButton.src = isPasswordCheckVisible 
+      ? 'img/btn_visibility_on_24px.png' // 가려진 상태
+      : 'img/btn_visibility_off_24px.png'; // 보이는 상태
+  
+    // alt 텍스트 변경 (웹 접근성)
+    toggleCheckButton.alt = isPasswordCheckVisible 
+      ? '비밀번호 숨기기'
+      : '비밀번호 보기';
+  });
+