diff --git a/.DS_Store b/.DS_Store
index 04e5f045..9fa7bd96 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/_redirects b/_redirects
new file mode 100644
index 00000000..50a46335
--- /dev/null
+++ b/_redirects
@@ -0,0 +1 @@
+/*    /index.html   200
\ No newline at end of file
diff --git a/assets/.DS_Store b/assets/.DS_Store
index c5af2de7..ec815b6b 100644
Binary files a/assets/.DS_Store and b/assets/.DS_Store differ
diff --git a/assets/eyes-on.png b/assets/eyes-on.png
new file mode 100644
index 00000000..467cf49a
Binary files /dev/null and b/assets/eyes-on.png differ
diff --git a/assets/eyes.png b/assets/eyes.png
index 8e80ce22..fb4eeaf4 100644
Binary files a/assets/eyes.png and b/assets/eyes.png differ
diff --git a/assets/panda-logo-medium.png b/assets/panda-logo-medium.png
new file mode 100644
index 00000000..7db8527a
Binary files /dev/null and b/assets/panda-logo-medium.png differ
diff --git a/assets/panda-logo-small.png b/assets/panda-logo-small.png
new file mode 100644
index 00000000..3d644886
Binary files /dev/null and b/assets/panda-logo-small.png differ
diff --git a/css/login.css b/css/common.css
similarity index 92%
rename from css/login.css
rename to css/common.css
index aa052cc8..0bdea66e 100644
--- a/css/login.css
+++ b/css/common.css
@@ -11,6 +11,16 @@
   --blue: #3692ff;
 }
 
+.error-message {
+  display: none;
+  position: relative;
+  bottom: 16px;
+  left: 16px;
+  margin-top: 8px;
+  font-size: 14px;
+  color: #f74747;
+}
+
 * {
   box-sizing: border-box;
   margin: 0;
@@ -27,10 +37,6 @@
   margin-top: 231px;
 }
 
-#join {
-  margin-bottom: 231px;
-}
-
 .panda-logo-img {
   width: 396px;
   height: 132px;
@@ -68,8 +74,8 @@
 }
 
 .eyes {
-  width: 20px;
-  height: 18px;
+  width: 24px;
+  height: 24px;
   position: relative;
   top: 5px;
   right: 50px;
@@ -137,6 +143,7 @@
 
 #join {
   margin-left: 4px;
+  margin-bottom: 231px;
 }
 
 .join-first {
@@ -155,8 +162,6 @@
 
 @media (max-width: 766px) {
   .panda-logo-a {
-    display: block;
-    width: fit-content;
     margin: 0 auto;
     margin-top: 80px;
   }
@@ -197,8 +202,8 @@
   }
 
   .eyes {
-    top: -95%;
-    left: 85%;
+    top: -53px;
+    left: 300px;
   }
 
   .simple-login {
diff --git a/css/signup.css b/css/signup.css
index 7bfdd898..1c1ad99a 100644
--- a/css/signup.css
+++ b/css/signup.css
@@ -1,209 +1,15 @@
-:root {
-  --gray-900: #111827;
-  --gray-800: #1f2937;
-  --gray-700: #374151;
-  --gray-600: #4b5563;
-  --gray-500: #6b7280;
-  --gray-400: #9ca3af;
-  --gray-200: #e5e7eb;
-  --gray-100: #f3f4f6;
-  --gray-50: #f9fafb;
-  --blue: #3692ff;
-}
-
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
 .panda-logo-a {
-  margin-top: 60px;
-}
-
-.join {
-  margin-bottom: 178px;
-}
-
-.hearder {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-
-.panda-logo-img {
-  width: 396px;
-  height: 132px;
-  margin: 0 122px 40px 122px;
-}
-
-.main {
-  flex-grow: 1;
-}
-
-.all-elements {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.form {
-  display: flex;
-  flex-direction: column;
-}
-
-.google-logo,
-.kakao-logo {
-  width: 42px;
-  height: 42px;
-}
-
-.google-logo {
-  margin-right: 16px;
-}
-
-.kakao-logo {
-  margin-right: 23px;
-}
-
-#google {
-  text-decoration: none;
-}
-#kakao {
-  text-decoration: none;
-}
-
-.simple-login {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background-color: #e6f2ff;
-  border-radius: 8px;
-  color: var(--gray-800);
-  max-width: 640px;
-  height: 74px;
-  padding-left: 23px;
-}
-
-.form label {
-  margin-bottom: 16px;
-  font-size: 18px;
-  font-weight: 700;
-  font-family: "Pretendard";
-}
-
-.form input {
-  margin-bottom: 24px;
-  border-radius: 12px;
-  width: 640px;
-  height: 56px;
-  background-color: #f3f4f6;
-  border: 0;
-  padding: 0 0 0 24px;
-}
-
-.eyes {
-  width: 20px;
-  height: 18px;
-  position: relative;
-  top: 5px;
-  right: 50px;
-}
-
-.form button {
-  margin-bottom: 24px;
-  width: 640px;
-  height: 56px;
-  border-radius: 40px;
-  border: 0;
-  background-color: var(--gray-400);
-  color: #f3f4f6;
-  font-size: 20px;
-}
-
-.form button:hover {
-  background-color: var(--blue);
-}
-
-.join {
-  margin-top: 24px;
-  display: flex;
-  justify-content: center;
-}
-
-#join {
-  margin-left: 4px;
-}
-
-.join-first {
-  color: var(--gray-800);
+  margin-top: 48px;
 }
 
 @media (max-width: 1199px) {
-  .panda-logo-a {
-    margin-top: 48px;
-  }
-
-  .join {
+  #join {
     margin-bottom: 243px;
   }
 }
 
 @media (max-width: 766px) {
-  .panda-logo-a {
-    display: block;
-    width: fit-content;
-    margin: 0 auto;
-    margin-top: 24px;
-  }
-
-  .panda-logo-img {
-    width: 198px;
-    height: 66px;
-    margin: 0;
-  }
-
-  .hearder {
-    max-width: 400px;
-    width: 100%;
-  }
-
-  .form label {
-    width: 100%;
-    max-width: 400px;
-    margin-bottom: 8px;
-  }
-
-  .form input {
-    width: 100%;
-    max-width: 400px;
-    margin-bottom: 16px;
-  }
-
-  .password-check-flex {
-    width: 100%;
-    max-width: 400px;
-    margin-bottom: 16px;
-    height: 56px;
-  }
-
-  .form button {
-    width: 100%;
-    max-width: 400px;
-  }
-
-  .eyes {
-    top: -95%;
-    left: 85%;
-  }
-
-  .simple-login {
-    width: 100%;
-    max-width: 400px;
-  }
-
-  .join {
+  #join {
     margin-bottom: 179px;
   }
 }
diff --git a/css/style.css b/css/style.css
index a7f9ca91..36e782b9 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,3 +1,22 @@
+/*유틸리티 클래스*/
+.flex {
+  display: flex;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.align-center {
+  align-items: center;
+}
+
+.center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 * {
   box-sizing: border-box;
   margin: 0;
@@ -16,9 +35,7 @@ main {
 }
 
 .nav-flex {
-  display: flex;
   justify-content: space-between;
-  align-items: center;
   padding: 0 200px;
   position: fixed;
   width: 100%;
@@ -32,9 +49,6 @@ main {
 }
 
 .login {
-  display: flex;
-  justify-content: center;
-  align-items: center;
   text-decoration: none;
   background-color: #3692ff;
   color: #f3f4f6;
@@ -51,12 +65,9 @@ main {
   max-width: 100%;
   height: 540px;
   background-color: #cfe5ff;
-  display: flex;
-  justify-content: center;
 }
 
 .landing-page-text {
-  display: flex;
   flex-direction: column;
   position: relative;
   top: 12.5rem;
@@ -65,7 +76,6 @@ main {
 
 .large-text {
   font-size: 2.5rem;
-  font-family: "Pretendard";
   font-weight: 700;
   line-height: 3.5rem;
   color: #374151;
@@ -78,12 +88,8 @@ main {
 
 .see {
   text-decoration: none;
-  font-family: "Pretendard";
   font-weight: 600;
   font-size: 1.25rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
   width: 357px;
   height: 56px;
   border-radius: 40px;
@@ -106,16 +112,16 @@ main {
   object-fit: cover;
 }
 
+.main-img#last {
+  height: 397px;
+}
+
 .second-page {
-  display: flex;
-  justify-content: center;
-  align-items: center;
   margin-top: 138px;
   margin-bottom: 138px;
 }
 
 .main-list {
-  display: flex;
   flex-direction: column;
 }
 
@@ -123,9 +129,7 @@ main {
   background-color: #fcfcfc;
   width: 400px;
   height: 444px;
-  display: flex;
   flex-direction: column;
-  justify-content: center;
   padding-left: 64px;
 }
 
@@ -146,9 +150,7 @@ main {
   background-color: #fcfcfc;
   width: 400px;
   height: 444px;
-  display: flex;
   flex-direction: column;
-  justify-content: center;
   padding-right: 64px;
   text-align: right;
 }
@@ -157,9 +159,7 @@ main {
   background-color: #fcfcfc;
   width: 400px;
   height: 444px;
-  display: flex;
   flex-direction: column;
-  justify-content: center;
   padding-left: 64px;
 }
 
@@ -172,24 +172,19 @@ main {
   max-width: 100%;
   height: 540px;
   background-color: #cfe5ff;
-  display: flex;
-  justify-content: center;
 }
 
 .large-text-last {
   font-size: 2.5rem;
-  font-family: "Pretendard";
   font-weight: 700;
   line-height: 56px;
   color: #374151;
   position: relative;
   top: 50px;
-  margin-right: 60px;
 }
 
 .footer {
   background-color: #111827;
-  display: flex;
   justify-content: space-around;
   align-items: baseline;
   height: 160px;
@@ -201,7 +196,6 @@ main {
 }
 
 .fqa {
-  display: flex;
   gap: 30px;
 }
 
@@ -215,7 +209,6 @@ main {
 }
 
 .last-img {
-  display: flex;
   gap: 10px;
 }
 
@@ -235,18 +228,14 @@ main {
   }
 
   .landing-page-text {
-    width: auto;
-    height: 56px;
-    position: relative;
-    top: 84px;
-    left: 400px;
-    white-space: nowrap;
+    top: 50px;
+    justify-content: center;
   }
 
   .large-text {
     margin-bottom: 24px;
   }
-  
+
   h2.large-text br {
     display: none;
   }
@@ -261,10 +250,11 @@ main {
   }
 
   .main-img {
-    top: 430px;
-    right: 255px;
+    position: absolute;
+    top: 500px;
     width: 100%;
     max-width: 100%;
+    width: 743px;
   }
 
   .second-page {
@@ -325,22 +315,15 @@ main {
   .landing-page-last {
     width: 100%;
     height: 927px;
-  }
-
-  .reliable {
+    text-align: center;
     position: relative;
-    left: 50px;
-  }
-
-  .large-text-last {
-    top: 150px;
   }
 
   .main-img#last {
-    top: 587px;
-    height: 397px;
-    width: 100%;
-    right: 176px;
+    position: absolute;
+    top: 540px;
+    max-width: 100%;
+    width: 743px;
   }
 }
 
@@ -360,7 +343,9 @@ main {
   .landing-page-text {
     width: auto;
     height: 156px;
-    left: 280px;
+    white-space: nowrap;
+    justify-content: center;
+    align-items: center;
   }
 
   .large-text {
@@ -374,9 +359,9 @@ main {
 
   .see-flex {
     position: relative;
-    left: 0;
+    left: 50px;
   }
-  
+
   .event-text {
     font-size: 16px;
     white-space: nowrap;
@@ -399,8 +384,7 @@ main {
 
   .main-img {
     height: 204px;
-    top: 336px;
-    right: 177px;
+    top: 406px;
     width: 448px;
     max-width: 448px;
     object-fit: cover;
@@ -414,20 +398,14 @@ main {
   .large-text-last {
     font-size: 32px;
     top: 0;
-    right: 50px;
   }
 
   .main-img#last {
+    position: absolute;
+    top: 342px;
+    max-width: 100%;
     width: 375px;
-    max-width: 375px;
     height: 198px;
-    top: 342px;
-    right: 148px;
-  }
-
-  .reliable {
-    position: relative;
-    left: 40px;
   }
 
   .design {
diff --git a/index.html b/index.html
index 6aecdaff..3522c01e 100644
--- a/index.html
+++ b/index.html
@@ -1,59 +1,69 @@
 <!DOCTYPE html>
 <html lang="ko">
-  <!DOCTYPE html>
-  <html lang="ko">
-    <head>
-      <meta charset="UTF-8" />
-      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      <meta property="og:title" content="판다 마켓" />
-      <meta property="og:description" content="일상의 모든 물건을 거래해보세요" />
-      <meta property="og:image" content="https://rainbow-sunflower-f8c164.netlify.app/assets/example.png" />
-      <meta property="og:url" content="https://rainbow-sunflower-f8c164.netlify.app/" />
-      <meta property="og:type" content="website" />
-      <meta name="twitter:title" content="판다 마켓" />
-      <meta name="twitter:description" content="일상의 모든 물건을 거래해보세요" />
-      <meta name="twitter:image" content="https://rainbow-sunflower-f8c164.netlify.app/assets/example.png" />
-      <meta name="twitter:card" content="summary_large_image" />
-      <title>판다마켓</title>
-      <link rel="stylesheet" href="./css/style.css" />
-      <link
-        href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"
-        rel="stylesheet"
-      />
-    </head>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta property="og:title" content="판다 마켓" />
+    <meta property="og:description" content="일상의 모든 물건을 거래해보세요" />
+    <meta
+      property="og:image"
+      content="https://rainbow-sunflower-f8c164.netlify.app/assets/example.png"
+    />
+    <meta
+      property="og:url"
+      content="https://rainbow-sunflower-f8c164.netlify.app/"
+    />
+    <meta property="og:type" content="website" />
+    <meta name="twitter:title" content="판다 마켓" />
+    <meta
+      name="twitter:description"
+      content="일상의 모든 물건을 거래해보세요"
+    />
+    <meta
+      name="twitter:image"
+      content="https://rainbow-sunflower-f8c164.netlify.app/assets/example.png"
+    />
+    <meta name="twitter:card" content="summary_large_image" />
+    <title>판다마켓</title>
+    <link rel="stylesheet" href="../css/style.css" />
+    <link
+      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"
+      rel="stylesheet"
+    />
+  </head>
   <body>
-    <header class="nav-flex">
-      <a href="/" class="logo"
+    <header class="nav-flex flex align-center">
+      <a href="./" class="logo"
         ><img
-          src="./assets/panda-logo.png"
+          src="../assets/panda-logo.png"
           alt="panda logo image"
           class="panda-logo-image"
       /></a>
-      <a href="./login.html" class="login">로그인</a>
+      <a href="./login.html" class="login center">로그인</a>
     </header>
 
     <main>
-      <div class="landing-page">
-        <div class="landing-page-text">
+      <div class="landing-page flex justify-center">
+        <div class="landing-page-text flex">
           <h2 class="large-text">
             일상의 모든 물건을 <br />
             <span class="deal">거래해보세요</span>
           </h2>
           <div class="see-flex">
-            <a href="/items.html" class="see">구경하러 가기</a>
+            <a href="./items.html" class="see center">구경하러 가기</a>
           </div>
         </div>
         <img
-          src="./assets/main.png"
+          src="../assets/main.png"
           alt="A cute panda standing there"
           class="main-img"
         />
       </div>
 
-      <div class="main-list">
-        <div class="second-page" id="hot-item">
-          <img src="./assets/hot-item.png" alt="A green panda shirt" />
-          <div class="text-box">
+      <div class="main-list flex">
+        <div class="second-page center" id="hot-item">
+          <img src="../assets/hot-item.png" alt="A green panda shirt" />
+          <div class="text-box flex justify-center">
             <span class="event-text">Hot item</span>
             <h2>
               <span class="event-large-text"
@@ -68,8 +78,8 @@ <h2>
 
         <div class="margin"></div>
 
-        <div class="second-page" id="search">
-          <div class="text-box-search">
+        <div class="second-page center" id="search">
+          <div class="text-box-search flex justify-center">
             <span class="event-text">Search</span>
             <h2>
               <span class="event-large-text"
@@ -80,18 +90,18 @@ <h2>
               >구매하고 싶은 물품은 검색해서 <br />쉽게 찾아보세요</span
             >
           </div>
-          <img src="./assets/search.png" alt="A magnifying glass picture" />
+          <img src="../assets/search.png" alt="A magnifying glass picture" />
         </div>
 
         <div class="margin"></div>
 
-        <div class="second-page" id="register">
+        <div class="second-page center" id="register">
           <img
-            src="./assets/register.png"
+            src="../assets/register.png"
             alt="Register for a variety of photos"
             class="register-img"
           />
-          <div class="text-box-register">
+          <div class="text-box-register flex justify-center">
             <span class="event-text">Register</span>
             <h2>
               <span class="event-large-text"
@@ -107,14 +117,14 @@ <h2>
 
       <div class="empty-area"></div>
 
-      <div class="landing-page-last">
+      <div class="landing-page-last flex justify-center">
         <div class="landing-page-text">
           <span class="large-text-last">
             <span class="reliable">믿을 수 있는</span><br />판다마켓 중고 거래
           </span>
         </div>
         <img
-          src="./assets/footer.png"
+          src="../assets/footer.png"
           alt="A photo of a panda waving its hand"
           class="main-img"
           id="last"
@@ -123,24 +133,24 @@ <h2>
     </main>
 
     <footer>
-      <div class="footer">
+      <div class="footer flex">
         <span class="design">©codeit - 2024</span>
-        <div class="fqa">
-          <a href="./privacy.html" class="real-last">Privacy Policy</a>
-          <a href="./faq.html" class="real-last">FAQ</a>
+        <div class="fqa flex">
+          <a href="./html/privacy.html" class="real-last">Privacy Policy</a>
+          <a href="./html/faq.html" class="real-last">FAQ</a>
         </div>
-        <div class="last-img">
+        <div class="last-img flex">
           <a href="https://www.facebook.com" target="_blank"
-            ><img src="./assets/facebook.png" alt=""
+            ><img src="../assets/facebook.png" alt=""
           /></a>
           <a href="https://x.com/?mx=2" target="_blank" id="twiter"
-            ><img src="./assets/twiter.png" alt=""
+            ><img src="../assets/twiter.png" alt=""
           /></a>
           <a href="https://www.youtube.com" target="_blank"
-            ><img src="./assets/youtube.png" alt=""
+            ><img src="../assets/youtube.png" alt=""
           /></a>
           <a href="https://www.instagram.com" target="_blank"
-            ><img src="./assets/instagram.png" alt=""
+            ><img src="../assets/instagram.png" alt=""
           /></a>
         </div>
       </div>
diff --git a/login.html b/login.html
index dc2c0e60..08cc58fe 100644
--- a/login.html
+++ b/login.html
@@ -4,24 +4,31 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>판다마켓 로그인</title>
-    <link rel="stylesheet" href="./css/login.css" />
+    <link rel="stylesheet" href="../css/common.css" />
     <link
       href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"
       rel="stylesheet"
     />
+    <script src="../scripts/login.js" type="module" defer></script>
   </head>
   <body>
     <main class="all-elements">
       <div class="hearder">
         <a href="./" class="panda-logo-a">
-          <img
-            src="./assets/panda-logo.png"
-            alt="panda logo image"
-            class="panda-logo-img"
-          />
+          <picture>
+            <source
+              srcset="../assets/panda-logo-small.png"
+              media="(max-width: 766px)"
+            />
+            <img
+              src="../assets/panda-logo.png"
+              alt="panda logo image"
+              class="panda-logo-img"
+            />
+          </picture>
         </a>
         <div class="main">
-          <form action="/" method="POST" class="form">
+          <form action="./items.html" method="GET" class="form">
             <label for="useremail">이메일</label>
             <input
               type="email"
@@ -30,6 +37,9 @@
               required
               placeholder="이메일을 입력해주세요"
             />
+            <span class="error-message" id="email-message"
+              >이메일을 입력해주세요.</span
+            >
             <label for="password">비밀번호</label>
             <div class="password-check-flex">
               <input
@@ -39,23 +49,26 @@
                 required
                 placeholder="비밀번호를 입력해주세요"
               />
-              <img src="./assets/eyes.png" alt="eyes" class="eyes" />
+              <img src="../assets/eyes.png" alt="eyes" class="eyes" id="eyes" />
             </div>
-            <button type="submit">로그인</button>
+            <span class="error-message" id="password-message"
+              >비밀번호를 8자 이상 입력해주세요</span
+            >
+            <button type="submit" id="active-button">로그인</button>
           </form>
           <div class="simple-login">
             <span>간편 로그인하기</span>
             <div>
               <a href="https://www.google.com" id="google">
                 <img
-                  src="./assets/google.png"
+                  src="../assets/google.png"
                   alt="google logo image"
                   class="google-logo"
                 />
               </a>
               <a href="https://www.kakaocorp.com/page" id="kakao">
                 <img
-                  src="./assets/kakao.png"
+                  src="../assets/kakao.png"
                   alt="kakao logo image"
                   class="kakao-logo"
                 />
diff --git a/scripts/common.js b/scripts/common.js
new file mode 100644
index 00000000..8951439e
--- /dev/null
+++ b/scripts/common.js
@@ -0,0 +1,99 @@
+export function emailCheck() {
+  const email = document.getElementById("useremail");
+  email.addEventListener("blur", (e) => {
+    const emailValue = e.target.value.trim();
+    const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
+    let emailMessage = document.getElementById("email-message");
+
+    if (emailValue === "") {
+      email.style.border = "1px solid #F74747";
+      emailMessage.classList.add("error-message");
+      emailMessage.style.display = "block";
+      emailMessage.textContent = "이메일을 입력해주세요.";
+    } else if (emailPattern.test(emailValue)) {
+      email.style.border = "1px solid #3692FF";
+      emailMessage.style.display = "none";
+    } else {
+      email.classList.add("error");
+      email.style.border = "1px solid #F74747";
+      emailMessage.classList.add("error-message");
+      emailMessage.style.display = "block";
+      emailMessage.textContent = "잘못된 이메일 형식입니다.";
+    }
+    setLoginButton();
+  });
+}
+
+export function passwordCheck() {
+  const password = document.getElementById("password");
+
+  password.addEventListener("blur", (e) => {
+    const passwordValue = e.target.value.trim();
+    let passwordMessage = document.getElementById("password-message");
+
+    if (passwordValue.length === 0) {
+      password.style.border = "1px solid #F74747";
+      passwordMessage.classList.add("error-message");
+      passwordMessage.style.display = "block";
+      passwordMessage.textContent = "비밀번호를 입력해주세요.";
+    } else if (passwordValue.length < 8) {
+      password.style.border = "1px solid #F74747";
+      passwordMessage.classList.add("error-message");
+      passwordMessage.style.display = "block";
+      passwordMessage.textContent = "비밀번호를 8자 이상 입력해주세요.";
+    } else {
+      password.style.border = "1px solid #3692FF";
+      passwordMessage.style.display = "none";
+    }
+    setLoginButton();
+  });
+}
+
+export function setLoginButton() {
+  const loginButton = document.getElementById("active-button");
+  const email = document.getElementById("useremail");
+  const password = document.getElementById("password");
+  const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
+
+  if (
+    email.value.trim() === "" ||
+    !emailPattern.test(email.value) ||
+    password.value.trim() === "" ||
+    password.value.length < 8
+  ) {
+    loginButton.disabled = true;
+  } else {
+    loginButton.disabled = false;
+  }
+}
+
+export function setPasswordView() {
+  const eyes = document.getElementById("eyes");
+  const password = document.getElementById("password");
+
+  eyes.addEventListener("click", () => {
+    if (password.type === "password") {
+      password.type = "text";
+      eyes.src = "../assets/eyes-on.png";
+    } else {
+      password.type = "password";
+      eyes.src = "../assets/eyes.png";
+    }
+  });
+}
+
+export function nickNameCheck() {
+  const nickName = document.getElementById("nickname");
+
+  nickName.addEventListener("blur", (e) => {
+    const nickNameMessage = document.getElementById("nickname-message");
+    if (nickName.value === "") {
+      nickName.style.border = "1px solid #F74747";
+      nickNameMessage.classList.add("error-message");
+      nickNameMessage.style.display = "block";
+    } else {
+      nickName.style.border = "1px solid #3692FF";
+      nickNameMessage.style.display = "none";
+    }
+  });
+}
diff --git a/scripts/login.js b/scripts/login.js
new file mode 100644
index 00000000..6b9f6c22
--- /dev/null
+++ b/scripts/login.js
@@ -0,0 +1,11 @@
+import {
+  emailCheck,
+  passwordCheck,
+  setLoginButton,
+  setPasswordView,
+} from "./common.js";
+
+emailCheck();
+passwordCheck();
+setLoginButton();
+setPasswordView();
diff --git a/scripts/signup.js b/scripts/signup.js
new file mode 100644
index 00000000..d524c283
--- /dev/null
+++ b/scripts/signup.js
@@ -0,0 +1,62 @@
+import {
+  emailCheck,
+  passwordCheck,
+  setPasswordView,
+  nickNameCheck,
+} from "./common.js";
+
+emailCheck();
+passwordCheck();
+setPasswordView();
+nickNameCheck();
+
+const againPasswordCheck = document.getElementById("password-check");
+
+againPasswordCheck.addEventListener("blur", (e) => {
+  const password = document.getElementById("password");
+  const againPasswordMessage = document.getElementById(
+    "password-again-message"
+  );
+  if (againPasswordCheck.value.trim() !== password.value.trim()) {
+    againPasswordCheck.style.border = "1px solid #F74747";
+    againPasswordMessage.classList.add("error-message");
+    againPasswordMessage.style.display = "block";
+  } else {
+    againPasswordCheck.style.border = "1px solid #3692FF";
+    againPasswordMessage.style.display = "none";
+  }
+});
+{
+  const loginButton = document.getElementById("active-button");
+  const email = document.getElementById("useremail");
+  const password = document.getElementById("password");
+  const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
+
+  const checkTwoPassword = () => {
+    if (
+      email.value.trim() === "" ||
+      !emailPattern.test(email.value) ||
+      password.value.trim() === "" ||
+      password.value.length < 8 ||
+      againPasswordCheck.value.trim() !== password.value.trim()
+    ) {
+      loginButton.disabled = true;
+    } else {
+      loginButton.disabled = false;
+    }
+  };
+  againPasswordCheck.addEventListener("input", checkTwoPassword);
+}
+
+const eyes = document.getElementById("second-eyes");
+const password = document.getElementById("password-check");
+
+eyes.addEventListener("click", () => {
+  if (password.type === "password") {
+    password.type = "text";
+    eyes.src = "../assets/eyes-on.png";
+  } else {
+    password.type = "password";
+    eyes.src = "../assets/eyes.png";
+  }
+});
diff --git a/signin.html b/signin.html
new file mode 100644
index 00000000..f2dea2e4
--- /dev/null
+++ b/signin.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>signin</title>
+  </head>
+  <body>
+    <h1>회원가입 페이지 입니당 :)</h1>
+  </body>
+</html>
diff --git a/signup.html b/signup.html
index 683c3bd8..96392392 100644
--- a/signup.html
+++ b/signup.html
@@ -4,24 +4,26 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>판다마켓 로그인</title>
-    <link rel="stylesheet" href="./css/signup.css" />
+    <link rel="stylesheet" href="../css/common.css" />
+    <link rel="stylesheet" href="../css/signup.css" />
     <link
       href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"
       rel="stylesheet"
     />
+    <script src="../scripts/signup.js" defer type="module"></script>
   </head>
   <body>
     <main class="all-elements">
       <div class="hearder">
-        <a href="./" class="panda-logo-a">
+        <a href="../" class="panda-logo-a">
           <img
-            src="./assets/panda-logo.png"
+            src="../assets/panda-logo.png"
             alt="panda logo image"
             class="panda-logo-img"
           />
         </a>
         <div class="main">
-          <form action="/" method="POST" class="form">
+          <form action="./signin.html" method="GET" class="form">
             <label for="useremail">이메일</label>
             <input
               type="email"
@@ -30,6 +32,9 @@
               required
               placeholder="이메일을 입력해주세요"
             />
+            <span class="error-message" id="email-message"
+              >이메일을 입력해주세요.</span
+            >
             <label for="nickname">닉네임</label>
             <input
               type="text"
@@ -38,6 +43,9 @@
               required
               placeholder="닉네임을 입력해주세요"
             />
+            <span class="error-message" id="nickname-message"
+              >닉네임을 입력해주세요.</span
+            >
             <label for="password">비밀번호</label>
             <div class="password-check-flex">
               <input
@@ -47,8 +55,11 @@
                 required
                 placeholder="비밀번호를 입력해주세요"
               />
-              <img src="./assets/eyes.png" alt="eyes" class="eyes" />
+              <img src="../assets/eyes.png" alt="eyes" class="eyes" id="eyes" />
             </div>
+            <span class="error-message" id="password-message"
+              >비밀번호를 8자 이상 입력해주세요</span
+            >
             <label for="password-check">비밀번호 확인</label>
             <div class="password-check-flex">
               <input
@@ -58,23 +69,31 @@
                 required
                 placeholder="비밀번호를 다시 한 번 입력해주세요"
               />
-              <img src="./assets/eyes.png" alt="eyes" class="eyes" />
+              <img
+                src="../assets/eyes.png"
+                alt="eyes"
+                class="eyes"
+                id="second-eyes"
+              />
             </div>
-            <button type="submit">회원가입</button>
+            <span class="error-message" id="password-again-message"
+              >비밀번호가 일치하지 않습니다.</span
+            >
+            <button type="submit" id="active-button">회원가입</button>
           </form>
           <div class="simple-login">
             <span>간편 로그인하기</span>
             <div>
               <a href="https://www.google.com" id="google">
                 <img
-                  src="./assets/google.png"
+                  src="../assets/google.png"
                   alt="google logo image"
                   class="google-logo"
                 />
               </a>
               <a href="https://www.kakaocorp.com/page" id="kakao">
                 <img
-                  src="./assets/kakao.png"
+                  src="../assets/kakao.png"
                   alt="kakao logo image"
                   class="kakao-logo"
                 />