From 56a546391650d223bb8b26ace170cc7df4f056eb Mon Sep 17 00:00:00 2001
From: jeonsooyoung <peace2332@naver.com>
Date: Thu, 22 May 2025 02:09:53 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat.=EC=A0=84=EC=88=98=EC=98=81=5F?=
 =?UTF-8?q?=EC=8A=A4=ED=94=84=EB=A6=B0=ED=8A=B8=EB=AF=B8=EC=85=983=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20=EB=82=B4=EC=9A=A9=20=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 common.css | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/common.css b/common.css
index a411db33..39e26925 100644
--- a/common.css
+++ b/common.css
@@ -122,7 +122,7 @@ html {
 }
 .footer .menus a {
   font-weight: 400;
-  color: #fff;
+  color: #e5e7eb;
 }
 .footer .menus a + a {
   margin-left: 30px;
@@ -171,12 +171,13 @@ html {
 .input_box .btn_pw.show {
   background: url(images/ico_visibility_on.png) no-repeat;
 }
-.pc_only {
-  display: block;
-}
+
 .mobile_only {
   display: none;
 }
+.pc_only {
+  display: block;
+}
 
 .tag_text {
   margin-bottom: 12px;

From 52edee682fc610b46e911b4dcc10d673d7f938db Mon Sep 17 00:00:00 2001
From: jeonsooyoung <peace2332@naver.com>
Date: Sun, 25 May 2025 07:13:01 +0900
Subject: [PATCH 2/2] =?UTF-8?q?feat.=EC=8A=A4=ED=94=84=EB=A6=B0=ED=8A=B8?=
 =?UTF-8?q?=EB=AF=B8=EC=85=984=EC=9E=91=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 common.css  |  17 ++++++
 login.html  | 110 +++++++++++++++++++++++++++++++++--
 signup.html | 164 +++++++++++++++++++++++++++++++++++++++++++++-------
 3 files changed, 264 insertions(+), 27 deletions(-)

diff --git a/common.css b/common.css
index 39e26925..a50d1038 100644
--- a/common.css
+++ b/common.css
@@ -151,6 +151,7 @@ html {
   padding: 16px 56px 16px 24px;
   border-radius: 12px;
   background-color: var(--gray100);
+  border: 1px solid var(--gray100);
   box-sizing: border-box;
   line-height: 26px;
   font-size: 16px;
@@ -165,6 +166,21 @@ html {
   transform: translateY(-50%);
   text-indent: -9999px;
 }
+.input_box.error input {
+  border-color: #f74747;
+}
+.error_msg {
+  display: none;
+  margin: 8px 16px -6px;
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 24px;
+  color: #f74747;
+}
+.input_box.error .error_msg {
+  display: block;
+}
+
 .input_box .btn_pw {
   background: url(images/ico_visibility_off.png) no-repeat;
 }
@@ -247,6 +263,7 @@ html {
   .input_box .label {
     margin-bottom: 8px;
   }
+
   .footer {
     position: relative;
     padding-left: 8%;
diff --git a/login.html b/login.html
index e3d6f4c4..c2b276fe 100644
--- a/login.html
+++ b/login.html
@@ -53,6 +53,7 @@ <h1 class="logo large">
                 id="input_email"
                 placeholder="이메일을 입력해주세요"
               />
+              <span class="error_msg"></span>
             </div>
             <div class="input_box">
               <label for="input_pw" class="label">비밀번호</label>
@@ -62,13 +63,21 @@ <h1 class="logo large">
                   id="input_pw"
                   placeholder="비밀번호를 입력해주세요"
                 />
-                <button type="button" class="btn btn_pw">
-                  <span>비밀번호 보이기</span>
-                </button>
-                <!--<button type="button" class="btn btn_pw show"><span>비밀번호 보이기</span></button> -->
+                <div class="btn_pw_show">
+                  <button type="button" class="btn btn_pw">
+                    <span>비밀번호 보이기</span>
+                  </button>
+                </div>
               </div>
+              <span class="error_msg"></span>
             </div>
-            <button type="submit" class="btn-blue large wide" disabled>
+            <button
+              type="type"
+              class="btn-blue large wide"
+              id="buttonLogin"
+              onClick="location.href='./item.html'"
+              disabled
+            >
               <span>로그인</span>
             </button>
             <div class="blue_box">
@@ -100,5 +109,96 @@ <h1 class="logo large">
         </form>
       </div>
     </main>
+
+    <script>
+      const inputs = document.querySelectorAll('input');
+      const inputEmail = document.querySelector('#input_email');
+      const inputPw = document.querySelector('#input_pw');
+      const email_regex = /^[A-Za-z0-9_.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+$/;
+
+      inputs.forEach(function (input) {
+        input.addEventListener('focusout', function () {
+          inputValidate(input);
+          toggleLoginButton();
+        });
+      });
+      function inputValidate(input) {
+        let msg = '';
+        let inputId = input.getAttribute('id');
+        if (input.value == '') {
+          if (inputId == 'input_email') msg = '이메일을 입력해주세요.';
+          else if (inputId == 'input_pw' || inputId == 'input_pw_check')
+            msg = '비밀번호를 입력해주세요.';
+        } else {
+          if (inputId == 'input_email') {
+            if (email_regex.test(inputEmail.value) == false)
+              msg = '잘못된 이메일 형식입니다.';
+          } else {
+            msg = '';
+          }
+
+          if (inputId == 'input_pw') {
+            const pw = inputPw.value;
+            if (inputId === 'input_pw' && pw.length < 8) {
+              msg = '비밀번호를 8자 이상 입력해주세요.';
+            } else {
+              msg = '';
+            }
+          }
+        }
+
+        setInputBlurMessage(input, msg);
+      }
+      function setInputBlurMessage(input, msg) {
+        let inputBox = input.closest('.input_box');
+        let errorMsg = inputBox.querySelector('.error_msg');
+        inputBox.classList.remove('error');
+        errorMsg.innerText = '';
+        if (msg) {
+          inputBox.classList.add('error');
+          errorMsg.innerText = msg;
+        }
+      }
+
+      function toggleLoginButton() {
+        const buttonLogin = document.querySelector('#buttonLogin');
+        const inputs = document.querySelectorAll('input');
+        const errors = document.querySelectorAll('.error_msg');
+
+        const emptyInputs = Array.from(inputs).filter(
+          (input) => input.value.trim() === ''
+        );
+
+        const errorMessages = Array.from(errors).filter(
+          (error) => error.innerText.trim() !== ''
+        );
+
+        if (emptyInputs.length === 0 && errorMessages.length === 0) {
+          buttonLogin.removeAttribute('disabled');
+        } else {
+          buttonLogin.setAttribute('disabled', 'disabled');
+        }
+      }
+      const toggleButtons = document.querySelectorAll('.btn_pw');
+
+      toggleButtons.forEach(function (button) {
+        button.addEventListener('click', function () {
+          const inputWrapper = button.closest('.input');
+          const input = inputWrapper.querySelector('input');
+          const span = button.querySelector('span');
+
+          if (input.value == '') return;
+          if (input.type === 'password') {
+            button.classList.add('show');
+            input.type = 'text';
+            span.innerText = '비밀번호 숨기기';
+          } else {
+            button.classList.remove('show');
+            input.type = 'password';
+            span.innerText = '비밀번호 보이기';
+          }
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/signup.html b/signup.html
index 96ff83c9..a6fa7812 100644
--- a/signup.html
+++ b/signup.html
@@ -53,6 +53,7 @@ <h1 class="logo large">
                 id="input_email"
                 placeholder="이메일을 입력해주세요"
               />
+              <span class="error_msg"></span>
             </div>
             <div class="input_box">
               <label for="input_nickname" class="label">닉네임</label>
@@ -61,36 +62,51 @@ <h1 class="logo large">
                 id="input_nickname"
                 placeholder="닉네임을 입력해주세요"
               />
+              <span class="error_msg"></span>
             </div>
             <div class="input_box">
               <label for="input_pw" class="label">비밀번호</label>
-              <div class="input btn_group">
-                <input
-                  type="password"
-                  id="input_pw"
-                  placeholder="비밀번호를 입력해주세요"
-                />
-                <button type="button" class="btn btn_pw">
-                  <span>비밀번호 보이기</span>
-                </button>
-                <!--<button type="button" class="btn btn_pw show"><span>비밀번호 보이기</span></button> -->
+              <div class="btn_group">
+                <div class="input">
+                  <input
+                    type="password"
+                    id="input_pw"
+                    placeholder="비밀번호를 입력해주세요"
+                  />
+                  <div class="btn_pw_show">
+                    <button type="button" class="btn btn_pw">
+                      <span>비밀번호 보이기</span>
+                    </button>
+                  </div>
+                </div>
+                <span class="error_msg"></span>
               </div>
             </div>
             <div class="input_box">
-              <label for="input_pw" class="label">비밀번호 확인</label>
-              <div class="input btn_group">
-                <input
-                  type="password"
-                  id="input_pw"
-                  placeholder="비밀번호를 다시 한 번 입력해주세요"
-                />
-                <button type="button" class="btn btn_pw">
-                  <span>비밀번호 보이기</span>
-                </button>
-                <!--<button type="button" class="btn btn_pw show"><span>비밀번호 보이기</span></button> -->
+              <label for="input_pw_check" class="label">비밀번호 확인</label>
+              <div class="btn_group">
+                <div class="input">
+                  <input
+                    type="password"
+                    id="input_pw_check"
+                    placeholder="비밀번호를 다시 한 번 입력해주세요"
+                  />
+                  <div class="btn_pw_show">
+                    <button type="button" class="btn btn_pw">
+                      <span>비밀번호 보이기</span>
+                    </button>
+                  </div>
+                </div>
+                <span class="error_msg"></span>
               </div>
             </div>
-            <button type="submit" class="btn-blue large wide" disabled>
+            <button
+              type="button"
+              class="btn-blue large wide"
+              id="buttonJoin"
+              onClick="location.href='./login.html'"
+              disabled
+            >
               <span>회원가입</span>
             </button>
             <div class="blue_box">
@@ -122,5 +138,109 @@ <h1 class="logo large">
         </form>
       </div>
     </main>
+
+    <script>
+      const inputs = document.querySelectorAll('input');
+      const inputEmail = document.querySelector('#input_email');
+      const inputPw = document.querySelector('#input_pw');
+      const inputPwCheck = document.querySelector('#input_pw_check');
+      const email_regex = /^[A-Za-z0-9_.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+$/;
+
+      inputs.forEach(function (input) {
+        input.addEventListener('focusout', function () {
+          inputValidate(input);
+          if (input.id === 'input_pw') inputValidate(inputPwCheck);
+          if (input.id === 'input_pw_check') inputValidate(inputPw);
+          toggleJoinButton();
+        });
+      });
+      function inputValidate(input) {
+        let msg = '';
+        let inputId = input.getAttribute('id');
+        if (input.value == '') {
+          if (inputId == 'input_email') msg = '이메일을 입력해주세요.';
+          if (inputId == 'input_nickname') msg = '닉네임을 입력해주세요.';
+          else if (inputId == 'input_pw' || inputId == 'input_pw_check')
+            msg = '비밀번호를 입력해주세요.';
+        } else {
+          if (inputId == 'input_email') {
+            if (email_regex.test(inputEmail.value) == false)
+              msg = '잘못된 이메일 형식입니다.';
+          } else {
+            msg = '';
+          }
+
+          if (inputId == 'input_pw' || inputId == 'input_pw_check') {
+            const pw = inputPw.value;
+            const pwCheck = inputPwCheck.value;
+            if (inputId === 'input_pw' && pw.length < 8) {
+              msg = '비밀번호를 8자 이상 입력해주세요.';
+            } else if (inputId === 'input_pw_check' && pwCheck.length < 8) {
+              msg = '비밀번호를 8자 이상 입력해주세요.';
+            } else if (pw !== '' && pwCheck !== '' && pw !== pwCheck) {
+              msg = '비밀번호가 일치하지 않습니다.';
+            } else {
+              msg = '';
+            }
+          }
+
+          if (inputId == 'input_nickname') {
+            msg = '';
+          }
+        }
+
+        setInputBlurMessage(input, msg);
+      }
+      function setInputBlurMessage(input, msg) {
+        let inputBox = input.closest('.input_box');
+        let errorMsg = inputBox.querySelector('.error_msg');
+        inputBox.classList.remove('error');
+        errorMsg.innerText = '';
+        if (msg) {
+          inputBox.classList.add('error');
+          errorMsg.innerText = msg;
+        }
+      }
+
+      function toggleJoinButton() {
+        const buttonJoin = document.querySelector('#buttonJoin');
+        const inputs = document.querySelectorAll('input');
+        const errors = document.querySelectorAll('.error_msg');
+
+        const emptyInputs = Array.from(inputs).filter(
+          (input) => input.value.trim() === ''
+        );
+
+        const errorMessages = Array.from(errors).filter(
+          (error) => error.innerText.trim() !== ''
+        );
+
+        if (emptyInputs.length === 0 && errorMessages.length === 0) {
+          buttonJoin.removeAttribute('disabled');
+        } else {
+          buttonJoin.setAttribute('disabled', 'disabled');
+        }
+      }
+      const toggleButtons = document.querySelectorAll('.btn_pw');
+
+      toggleButtons.forEach(function (button) {
+        button.addEventListener('click', function () {
+          const inputWrapper = button.closest('.input');
+          const input = inputWrapper.querySelector('input');
+          const span = button.querySelector('span');
+
+          if (input.value == '') return;
+          if (input.type === 'password') {
+            button.classList.add('show');
+            input.type = 'text';
+            span.innerText = '비밀번호 숨기기';
+          } else {
+            button.classList.remove('show');
+            input.type = 'password';
+            span.innerText = '비밀번호 보이기';
+          }
+        });
+      });
+    </script>
   </body>
 </html>