diff --git a/css/base/common.css b/css/base/common.css
index 6d8d2d71..5169aa57 100644
--- a/css/base/common.css
+++ b/css/base/common.css
@@ -209,6 +209,90 @@
   background-image: url(../../img/ico/ico_instagram.svg);
 }
 
+/*form*/
+.form {
+  display: grid;
+  gap: 24px 0;
+}
+
+.form .form__label {
+  display: block;
+  font-size: var(--text-2lg-size);
+  line-height: var(--text-2lg-height);
+  font-weight: 700;
+  margin-bottom: 16px;
+}
+
+.form .form__input {
+  display: block;
+  width: 100%;
+  height: 56px;
+  background: var(--color-gray-100);
+  border-radius: 12px;
+  padding: 0 24px;
+  color: var(--color-gray-800);
+}
+
+.form .form__input::placeholder {
+  color: var(--color-gray-400);
+}
+
+.form .form__input:focus {
+  outline: 1px solid var(--color-primary-100);
+}
+
+.form .form__input:-webkit-autofill{
+ -webkit-box-shadow: 0 0 0 1000px var(--color-gray-100) inset;
+}
+
+.form .message {
+  display: block;
+  margin-top: 8px;
+  padding: 0 16px;
+  font-size: var(--text-md-size);
+  line-height: var(--text-md-height);
+  font-weight: 600;
+}
+
+.form .password-input {
+  position: relative;
+}
+
+.form .password-input .form__input {
+  padding-right: 72px;
+}
+
+.form .password-input__toggle {
+  position: absolute;
+  top: 16px;
+  right: 24px;
+  width: 24px;
+  height: 24px;
+  mask-image: url(../../img/ico/ico-visibility-off.svg);
+  -webkit-mask-image: url(../../img/ico/ico-visibility-off.svg);
+  background: var(--color-gray-600);
+  z-index: 1;
+}
+
+.form .password-input__toggle[aria-pressed="true"] {
+  mask-image: url(../../img/ico/ico-visibility-on.svg);
+  -webkit-mask-image: url(../../img/ico/ico-visibility-on.svg);
+}
+
+.form .status--error .form__input {
+  outline: 1px solid var(--color-error);
+}
+
+.form .status--error .message {
+  color: var(--color-error);
+}
+
+.form .btn--submit {
+  width: 100%;
+  height: 56px;
+}
+
+
 /* [Tablet] media query */
 @media screen and (max-width: 1199px) {
   .wrap .inner {
@@ -226,6 +310,7 @@
     padding: 0 16px;
   }
 
+  /* button */
   .btn--lg {
     width: 240px;
     font-size: var(--text-2lg-size);
@@ -233,12 +318,14 @@
     padding: 11px 40px;
   }
 
+  /* header */
   body:not([class*=sign-]) .header .ico--logo {
     background: var(--ico-logo-text);
     width: 103px;
     height: 51px;
   }
 
+  /* footer */
   .footer {
     padding: 32px 0 30px;
   }
@@ -253,4 +340,16 @@
   .footer .copyright {
     order: 3;
   }
+
+
+  /* form */
+  .form {
+    gap: 16px 0;
+  }
+
+  .form .form__label {
+    font-size: var(--text-md-size);
+    line-height: var(--text-md-height);
+    margin-bottom: 8px;
+  }
 }
\ No newline at end of file
diff --git a/css/pages/auth/style.css b/css/pages/auth/style.css
new file mode 100644
index 00000000..0959ee3f
--- /dev/null
+++ b/css/pages/auth/style.css
@@ -0,0 +1,115 @@
+/* auth header */
+body[class*=sign-] .header {
+    position: relative;
+    height: auto;
+    display: flex;
+    justify-content: center;
+    border: 0;
+    background-color: transparent;
+    margin-bottom: 40px;
+}
+
+body[class*=sign-] .header .ico--logo {
+    width: 396px;
+    height: 132px;
+}
+
+/* auth */
+body[class*=sign-] .wrap {
+    padding: 60px 0;
+}
+
+/* sign-in/sign-out */
+body[class*=sign-] .wrap {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+body[class*=sign-] .inner {
+    max-width: calc(640px + 104px);
+    padding: 0 52px;
+    margin: 0 auto;
+}
+
+body[class*=sign-] .main {
+    display: grid;
+    gap: 24px 0;
+}
+
+body[class*=sign-] .sns-login {
+    background: #E6F2FF;
+    border-radius: 8px;
+    font-weight: 500;
+    padding: 16px 23px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+body[class*=sign-] .sns-list {
+    display: flex;
+    align-items: center;
+    gap: 0 16px;
+}
+
+body[class*=sign-] .sns-list .ico {
+    width: 42px;
+    height: 42px;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 100%;
+}
+
+body[class*=sign-] .sns-list a {
+    display: block;
+}
+
+body[class*=sign-] .sns-list .ico--google {
+    background-image: url(../../../img/ico/ico-google.svg);
+}
+
+body[class*=sign-] .sns-list .ico--kakao {
+    background-image: url(../../../img/ico/ico_kakao.svg);
+}
+
+body[class*=sign-] .auth-find {
+    font-weight: 500;
+    text-align: center;
+    font-size: var(--text-md-size);
+    line-height: var(--text-md-height);
+}
+
+body[class*=sign-] .auth-find .btn {
+    margin-left: 4px;
+}
+
+
+/* [Tablet] media query */
+@media screen and (max-width: 1199px) {
+    body[class*=sign-] .wrap {
+        padding: 48px 0;
+    }
+}
+
+/* [Mobile] media query */
+@media screen and (max-width: 767px) {
+    body[class*=sign-] .header {
+        margin-bottom: 24px;
+    }
+
+    body[class*=sign-] .header .ico--logo {
+        width: 198px;
+        height: 66px;
+    }
+
+    body[class*=sign-] .wrap {
+        padding: 24px 0;
+    }
+
+    body[class*=sign-] .inner {
+        padding: 0 16px;
+        max-width: 400px;
+    }
+}
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index 3da907c6..9a33d3a3 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,6 +1,6 @@
 /**
  * @version 1.0
- * @date 2025-07-02
+ * @date 2025-07-13
  * @author Yeonsu Webpublisher
  * @link https://velog.io/@iamsuuya/posts
 **/
@@ -8,204 +8,3 @@
 @import './base/base.css';
 @import './base/common.css';
 
-/* auth header */
-body[class*=sign-] .header {
-    position: relative;
-    height: auto;
-    display: flex;
-    justify-content: center;
-    border: 0;
-    background-color: transparent;
-    margin-bottom: 40px;
-}
-
-body[class*=sign-] .header .ico--logo {
-    width: 396px;
-    height: 132px;
-}
-
-/* auth */
-body[class*=sign-] .wrap {
-    padding: 60px 0;
-}
-
-/* sign-in/sign-out */
-body[class*=sign-] .wrap {
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-}
-
-body[class*=sign-] .inner {
-    max-width: calc(640px + 104px);
-    padding: 0 52px;
-    margin: 0 auto;
-}
-
-body[class*=sign-] .main {
-    display: grid;
-    gap: 24px 0;
-}
-
-body[class*=sign-] .sns-login {
-    background: #E6F2FF;
-    border-radius: 8px;
-    font-weight: 500;
-    padding: 16px 23px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-
-body[class*=sign-] .sns-list {
-    display: flex;
-    align-items: center;
-    gap: 0 16px;
-}
-
-body[class*=sign-] .sns-list .ico {
-    width: 42px;
-    height: 42px;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: 100%;
-}
-
-body[class*=sign-] .sns-list a {
-    display: block;
-}
-
-body[class*=sign-] .sns-list .ico--google {
-    background-image: url(../img/ico/ico-google.svg);
-}
-
-body[class*=sign-] .sns-list .ico--kakao {
-    background-image: url(../img/ico/ico_kakao.svg);
-}
-
-body[class*=sign-] .auth-find {
-    font-weight: 500;
-    text-align: center;
-    font-size: var(--text-md-size);
-    line-height: var(--text-md-height);
-}
-
-body[class*=sign-] .auth-find .btn {
-    margin-left: 4px;
-}
-
-/*form*/
-.form {
-    display: grid;
-    gap: 24px 0;
-}
-
-.form .form__label {
-    display: block;
-    font-size: var(--text-2lg-size);
-    line-height: var(--text-2lg-height);
-    font-weight: 700;
-    margin-bottom: 16px;
-}
-
-.form .form__input {
-    display: block;
-    width: 100%;
-    height: 56px;
-    background: var(--color-gray-100);
-    border-radius: 12px;
-    padding: 0 24px;
-    color: var(--color-gray-800);
-}
-
-.form .form__input::placeholder {
-    color: var(--color-gray-400);
-}
-
-.form .form__input:focus {
-    outline: 1px solid var(--color-primary-100);
-}
-
-.form .input--error {
-    outline: 1px solid var(--color-error);
-}
-
-.form .error-message {
-    color: var(--color-error);
-    margin-top: 8px;
-    padding: 0 16px;
-    font-size: var(--text-md-size);
-    line-height: var(--text-md-height);
-    font-weight: 600;
-}
-
-.form .password-input {
-    position: relative;
-}
-
-.form .password-input .form__input {
-    padding-right: 72px;
-}
-
-.form .password-input__toggle {
-    position: absolute;
-    top: 50%;
-    right: 24px;
-    transform: translateY(-50%);
-    width: 24px;
-    height: 24px;
-    mask-image: url(../img/ico/ico-visibility-off.svg);
-    -webkit-mask-image: url(../img/ico/ico-visibility-off.svg);
-    background: var(--color-gray-600);
-    z-index: 1;
-}
-
-.form .password-input__toggle[aria-pressed="true"] {
-    mask-image: url(../img/ico/ico-visibility-on.svg);
-    -webkit-mask-image: url(../img/ico/ico-visibility-on.svg);
-}
-
-.form .btn--submit {
-    width: 100%;
-    height: 56px;
-}
-
-
-/* [Tablet] media query */
-@media screen and (max-width: 1199px) {
-    body[class*=sign-] .wrap {
-        padding: 48px 0;
-    }
-}
-
-/* [Mobile] media query */
-@media screen and (max-width: 767px) {
-    body[class*=sign-] .header {
-        margin-bottom: 24px;
-    }
-
-    body[class*=sign-] .header .ico--logo {
-        width: 198px;
-        height: 66px;
-    }
-
-    body[class*=sign-] .wrap {
-        padding: 24px 0;
-    }
-
-    body[class*=sign-] .inner {
-        padding: 0 16px;
-        max-width: 400px;
-    }
-
-    .form {
-        gap: 16px 0;
-    }
-
-    .form .form__label {
-        font-size: var(--text-md-size);
-        line-height: var(--text-md-height);
-        margin-bottom: 8px;
-    }
-}
\ No newline at end of file
diff --git a/index.html b/index.html
index 81a9bb44..689a15a5 100644
--- a/index.html
+++ b/index.html
@@ -3,20 +3,20 @@
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="shortcut icon" href="./img/favicon.ico">
-        <link rel="shortcut icon" href="./img/favicon.png">
-        <link rel="apple-touch-icon" href="./img/favorite.png">
+        <link rel="shortcut icon" href="/img/favicon.ico">
+        <link rel="shortcut icon" href="/img/favicon.png">
+        <link rel="apple-touch-icon" href="/img/favorite.png">
         <meta name="keywords" content="판다마켓, 코드잇, codeit" />
         <meta name="description" content="일상의 모든 물건을 거래해보세요" />
         <meta property="og:title" content="판다마켓" />
         <meta property="og:description" content="일상의 모든 물건을 거래해보세요" />
-        <meta property="og:image" content="https://fe18-yeonsulee.netlify.app/img/og-img.png">
+        <meta property="og:image" content="/img/og-img.png">
         <meta property="og:url" content="https://fe18-yeonsulee.netlify.app/" />
         <!-- twitter -->
         <meta name="twitter:card" content="summary_large_image" />
         <meta name="twitter:title" content="판다마켓" />
         <meta name="twitter:description" content="일상의 모든 물건을 거래해보세요" />
-        <meta name="twitter:image" content="https://fe18-yeonsulee.netlify.app/img/og-img.png" />
+        <meta name="twitter:image" content="/img/og-img.png" />
         <title>판다마켓</title>
         <link rel="stylesheet" type="text/css" href="./css/style.css">
         <link rel="stylesheet" type="text/css" href="./css/main.css">
@@ -31,7 +31,7 @@ <h1 class="logo">
                         </a>
                     </h1>
                     <ul class="util-list">
-                        <li><a href="./login.html" class="btn btn--sm btn--login">로그인</a></li>
+                        <li><a href="./pages/auth/login.html" class="btn btn--sm btn--login">로그인</a></li>
                     </ul>
                 </div>
             </header>
@@ -40,7 +40,7 @@ <h1 class="logo">
                     <div class="inner">
                         <div class="section__head">
                             <h2 class="section__title">일상의 모든 물건을 <br>거래해 보세요</h2>
-                            <a href="./items.html" class="btn btn--link btn--lg">구경하러 가기</a>
+                            <a href="./pages/products/items.html" class="btn btn--link btn--lg">구경하러 가기</a>
                         </div>
                     </div>
                 </section>
@@ -84,8 +84,8 @@ <h2 class="section__title">믿을 수 있는 <br>판다마켓 중고 거래</h2>
                 <div class="inner">
                     <p class="copyright">©codeit - 2024</p>
                     <ul class="info-list">
-                        <li><a href="./privacy.html">Privacy Policy</a></li>
-                        <li><a href="./faq.html">FAQ</a></li>
+                        <li><a href="./pages/info/privacy.html">Privacy Policy</a></li>
+                        <li><a href="./pages/info/faq.html">FAQ</a></li>
                     </ul>
                     <ul class="sns-list">
                         <li><a href="https://www.facebook.com/" target="_blank"><span class="blind">페이스북</span><i class="ico ico--facebook"></i></a></li>
diff --git a/items.html b/items.html
deleted file mode 100644
index e69de29b..00000000
diff --git a/js/user/auth.js b/js/user/auth.js
new file mode 100644
index 00000000..c75a966c
--- /dev/null
+++ b/js/user/auth.js
@@ -0,0 +1,102 @@
+// auth.js: 폼 UI, 이벤트, 유효성 체크 JS
+import { validateEmail, validateNickName, validatePassword, passwordMatch } from "../utils/validators.js";
+
+const form = document.querySelector(".form");
+const formFields = form.querySelectorAll("input");
+const togglePasswordBtn = form.querySelectorAll(".password-input__toggle");
+const submitBtn = form.querySelector(".btn--submit");
+const authType = form.dataset.auth;
+
+/* 유효성 검사 함수 매핑(id 기반) 객체이기 때문에 
+객체 key 관리 시, 지정한 각 폼 요소 id 이름하고 동일하게 작성 */
+const validators = {
+    email: validateEmail,
+    nickname: validateNickName,
+    password: validatePassword,
+    passwordConfirm: (passwordConfirm) => {
+        const password = form.querySelector("#password").value;
+        return passwordMatch(password, passwordConfirm);
+    },
+}
+
+// 상태 메시지 관리
+const setStatusMessage = (field, message, statusType = "") => {
+    const formField = field.closest(".form-field");
+    const currentMessage = formField.querySelector(".message");
+
+    if (currentMessage) {
+        currentMessage.remove();
+    }
+    formField.classList.forEach(className => {
+        if (className.startsWith("status--")) {
+            formField.classList.remove(className);
+        }
+    });
+
+    if (message) {
+        const messageEl = document.createElement("span");
+        messageEl.className = "message";
+        messageEl.textContent = message;
+
+        if (statusType) {
+            formField.classList.add(`status--${statusType}`);
+        }
+
+        field.after(messageEl);
+
+    }
+};
+
+// 폼 유효성 체크
+const checkForm = () => {
+    for (const field of formFields) {
+        const targetFieldId = validators[field.id];
+        if (!targetFieldId) {
+            continue;
+        };
+
+        const { status } = targetFieldId(field.value);
+        if (status !== "success") {
+            submitBtn.disabled = true;
+            return;
+        }
+    }
+    submitBtn.disabled = false;
+}
+
+// s: 이벤트 관리
+// click: 패스워드 비밀번호 표시/숨기기 버튼 토글 기능
+togglePasswordBtn.forEach((toggleBtn) => {
+    toggleBtn.addEventListener("click", () => {
+        const isPressed = toggleBtn.getAttribute("aria-pressed") === "true";
+        const inputType = toggleBtn.closest(".password-input").querySelector("input");
+
+        toggleBtn.setAttribute("aria-pressed", isPressed ? "false" : "true");
+        inputType.type = isPressed ? "password" : "text";
+    });
+});
+
+// focusout: targetFieldId 검증, 폼 체크
+form.addEventListener("focusout", (e) => {
+    const targetField = e.target;
+    const targetFieldId = validators[targetField.id];
+    if (!targetFieldId) {
+        return;
+    };
+
+    const { message, status } = targetFieldId(targetField.value);
+    setStatusMessage(targetField, message, status);
+
+    checkForm();
+});
+
+// submit: 폼 제출 페이지 이동
+form.addEventListener("submit", (e) => {
+    e.preventDefault();
+
+    if (authType === "login") {
+        window.location.href = "/pages/products/items.html";
+    } else if (authType === "signup") {
+        window.location.href = "./login.html";
+    }
+});
\ No newline at end of file
diff --git a/js/utils/validators.js b/js/utils/validators.js
new file mode 100644
index 00000000..f16f581c
--- /dev/null
+++ b/js/utils/validators.js
@@ -0,0 +1,44 @@
+// validators.js: 입력 검증 함수, 상태 반환 관리 JS
+const SUCCESS = { message: "", status: "success" };
+
+// 이메일 입력 검증
+export const validateEmail = (email) => {
+    const pattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+
+    if (!email) {
+        return { message: "이메일을 입력해주세요.", status: "error" };
+    }
+    if (!pattern.test(email)) {
+        return { message: "잘못된 이메일 형식입니다.", status: "error" };
+    }
+
+    return SUCCESS;
+};
+
+// 닉네임 입력 검증
+export const validateNickName = (nickname) => {
+    if (!nickname) {
+        return { message: "닉네임을 입력해주세요.", status: "error" };
+    }
+    return SUCCESS;
+};
+
+// 패스워드 입력 검증
+export const validatePassword = (password) => {
+    if (!password) {
+        return { message: "비밀번호를 입력해주세요.", status: "error" };
+    }
+    if (password.length < 8) {
+        return { message: "비밀번호를 8자 이상 입력해주세요.", status: "error" };
+    }
+
+    return SUCCESS;
+};
+
+// 패스워드 값 일치 검증
+export const passwordMatch = (password, passwordConfirm) => {
+    if (password !== passwordConfirm) {
+        return { message: "비밀번호가 일치하지 않습니다.", status: "error" };
+    }
+    return SUCCESS;
+};
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 00000000..3dbc1ca5
--- /dev/null
+++ b/package.json
@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}
diff --git a/login.html b/pages/auth/login.html
similarity index 79%
rename from login.html
rename to pages/auth/login.html
index 98682e8d..f820e822 100644
--- a/login.html
+++ b/pages/auth/login.html
@@ -3,36 +3,37 @@
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="shortcut icon" href="./img/favicon.ico">
-        <link rel="shortcut icon" href="./img/favicon.png">
-        <link rel="apple-touch-icon" href="./img/favorite.png">
+        <link rel="shortcut icon" href="/img/favicon.ico">
+        <link rel="shortcut icon" href="/img/favicon.png">
+        <link rel="apple-touch-icon" href="/img/favorite.png">
         <meta name="keywords" content="판다마켓, 코드잇, codeit" />
         <meta name="description" content="일상의 모든 물건을 거래해보세요" />
         <meta property="og:title" content="로그인 | 판다마켓" />
         <meta property="og:description" content="일상의 모든 물건을 거래해보세요" />
-        <meta property="og:image" content="https://fe18-yeonsulee.netlify.app/img/og-img.png">
+        <meta property="og:image" content="/img/og-img.png">
         <meta property="og:url" content="https://fe18-yeonsulee.netlify.app/login" />
         <!-- twitter -->
         <meta name="twitter:card" content="summary_large_image" />
         <meta name="twitter:title" content="로그인 | 판다마켓" />
         <meta name="twitter:description" content="일상의 모든 물건을 거래해보세요" />
-        <meta name="twitter:image" content="https://fe18-yeonsulee.netlify.app/img/og-img.png" />
+        <meta name="twitter:image" content="/img/og-img.png" />
         <title>로그인 | 판다마켓</title>
-        <link rel="stylesheet" type="text/css" href="./css/style.css">
+        <link rel="stylesheet" type="text/css" href="/css/style.css">
+        <link rel="stylesheet" type="text/css" href="/css/pages/auth/style.css">
     </head>
     <body class="sign-in">
         <div id="wrap" class="wrap">
             <div class="inner">
                 <header class="header">
                     <h1 class="logo">
-                        <a href="./index.html" class="logo__link ico--logo" aria-label="판다마켓 홈으로 이동">
+                        <a href="/" class="logo__link ico--logo" aria-label="판다마켓 홈으로 이동">
                             <span class="blind">판다마켓</span>
                         </a>
                     </h1>
                 </header>
                 <main class="main">
                     <h2 class="blind">판다마켓 로그인</h2>
-                    <form action="#" method="POST" class="form auth-form">
+                    <form action="/pages/products/items.html" method="POST" class="form auth-form" data-auth="login">
                         <div class="form-field">
                             <label for="email" class="form__label">이메일</label>
                             <input type="email" id="email" name="email" class="form__input" placeholder="이메일을 입력해주세요." autocomplete="on" required>
@@ -40,7 +41,7 @@ <h2 class="blind">판다마켓 로그인</h2>
                         <div class="form-field">
                             <label for="password" class="form__label">비밀번호</label>
                             <div class="password-input">
-                                <input type="password" id="password" name="password" class="form__input" placeholder="비밀번호를 입력해주세요." required>
+                                <input type="password" id="password" name="password" class="form__input" placeholder="비밀번호를 입력해주세요." autocomplete="current-password" required>
                                 <button type="button" class="password-input__toggle btn--toggle" aria-pressed="false">
                                     <span class="blind">비밀번호 표시/숨기기</span>
                                 </button>
@@ -61,5 +62,7 @@ <h2 class="blind">판다마켓 로그인</h2>
                 </main>
             </div>
         </div>
+        <!-- js -->
+        <script type="module" src="/js/user/auth.js"></script>
     </body>
 </html>
\ No newline at end of file
diff --git a/signup.html b/pages/auth/signup.html
similarity index 77%
rename from signup.html
rename to pages/auth/signup.html
index 46a8d264..47bf4b1b 100644
--- a/signup.html
+++ b/pages/auth/signup.html
@@ -3,48 +3,49 @@
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="shortcut icon" href="./img/favicon.ico">
-        <link rel="shortcut icon" href="./img/favicon.png">
-        <link rel="apple-touch-icon" href="./img/favorite.png">
+        <link rel="shortcut icon" href="/img/favicon.ico">
+        <link rel="shortcut icon" href="/img/favicon.png">
+        <link rel="apple-touch-icon" href="/img/favorite.png">
         <meta name="keywords" content="판다마켓, 코드잇, codeit" />
         <meta name="description" content="일상의 모든 물건을 거래해보세요" />
         <meta property="og:title" content="회원가입 | 판다마켓" />
         <meta property="og:description" content="일상의 모든 물건을 거래해보세요" />
-        <meta property="og:image" content="https://fe18-yeonsulee.netlify.app/img/og-img.png">
+        <meta property="og:image" content="/img/og-img.png">
         <meta property="og:url" content="https://fe18-yeonsulee.netlify.app/signup" />
         <!-- twitter -->
         <meta name="twitter:card" content="summary_large_image" />
         <meta name="twitter:title" content="회원가입 | 판다마켓" />
         <meta name="twitter:description" content="일상의 모든 물건을 거래해보세요" />
-        <meta name="twitter:image" content="https://fe18-yeonsulee.netlify.app/img/og-img.png" />
+        <meta name="twitter:image" content="/img/og-img.png" />
         <title>회원가입 | 판다마켓</title>
-        <link rel="stylesheet" type="text/css" href="./css/style.css">
+        <link rel="stylesheet" type="text/css" href="/css/style.css">
+        <link rel="stylesheet" type="text/css" href="/css/pages/auth/style.css">
     </head>
     <body class="sign-up">
         <div id="wrap" class="wrap">
             <div class="inner">
                 <header class="header">
                     <h1 class="logo">
-                        <a href="./index.html" class="logo__link ico--logo" aria-label="판다마켓 홈으로 이동">
+                        <a href="/" class="logo__link ico--logo" aria-label="판다마켓 홈으로 이동">
                             <span class="blind">판다마켓</span>
                         </a>
                     </h1>
                 </header>
                 <main class="main">
                     <h2 class="blind">판다마켓 회원가입</h2>
-                    <form action="#" method="POST" class="form auth-form">
+                    <form action="./login.html" method="POST" class="form auth-form" data-auth="signup">
                         <div class="form-field">
                             <label for="email" class="form__label">이메일</label>
                             <input type="email" id="email" name="email" class="form__input" placeholder="이메일을 입력해주세요." autocomplete="on" required>
                         </div>
-                         <div class="form-field">
+                        <div class="form-field">
                             <label for="nickname" class="form__label">닉네임</label>
-                            <input type="text" id="nickname" name="nickname" class="form__input" placeholder="닉네임을 입력해주세요." required>
+                            <input type="text" id="nickname" name="nickname" class="form__input" placeholder="닉네임을 입력해주세요." autocomplete="username" required>
                         </div>
                         <div class="form-field">
                             <label for="password" class="form__label">비밀번호</label>
                             <div class="password-input">
-                                <input type="password" id="password" name="password" class="form__input" placeholder="비밀번호를 입력해주세요." required>
+                                <input type="password" id="password" name="password" class="form__input" placeholder="비밀번호를 입력해주세요." autocomplete="current-password" required>
                                 <button type="button" class="password-input__toggle btn--toggle" aria-pressed="false">
                                     <span class="blind">비밀번호 표시/숨기기</span>
                                 </button>
@@ -53,8 +54,8 @@ <h2 class="blind">판다마켓 회원가입</h2>
                         <div class="form-field">
                             <label for="passwordConfirm" class="form__label">비밀번호 확인</label>
                             <div class="password-input">
-                                <input type="passwordConfirm" id="passwordConfirm" name="passwordConfirm" class="form__input" placeholder="비밀번호를 재입력해주세요." required>
-                                <button type="button" class="password-input__toggle btn--toggle" aria-pressed="true">
+                                <input type="password" id="passwordConfirm" name="passwordConfirm" class="form__input" placeholder="비밀번호를 재입력해주세요." autocomplete="current-password" required>
+                                <button type="button" class="password-input__toggle btn--toggle" aria-pressed="false">
                                     <span class="blind">비밀번호 표시/숨기기</span>
                                 </button>
                             </div>
@@ -74,5 +75,7 @@ <h2 class="blind">판다마켓 회원가입</h2>
                 </main>
             </div>
         </div>
+        <!-- js -->
+        <script type="module" src="/js/user/auth.js"></script>
     </body>
 </html>
\ No newline at end of file
diff --git a/faq.html b/pages/info/faq.html
similarity index 100%
rename from faq.html
rename to pages/info/faq.html
diff --git a/privacy.html b/pages/info/privacy.html
similarity index 100%
rename from privacy.html
rename to pages/info/privacy.html
diff --git a/pages/products/items.html b/pages/products/items.html
new file mode 100644
index 00000000..e293f9f8
--- /dev/null
+++ b/pages/products/items.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="ko">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="shortcut icon" href="/img/favicon.ico">
+        <link rel="shortcut icon" href="/img/favicon.png">
+        <link rel="apple-touch-icon" href="/img/favorite.png">
+        <meta name="keywords" content="판다마켓, 코드잇, codeit" />
+        <meta name="description" content="일상의 모든 물건을 거래해보세요" />
+        <meta property="og:title" content="중고마켓 | 판다마켓" />
+        <meta property="og:description" content="일상의 모든 물건을 거래해보세요" />
+        <meta property="og:image" content="/img/og-img.png">
+        <meta property="og:url" content="https://fe18-yeonsulee.netlify.app/login" />
+        <!-- twitter -->
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta name="twitter:title" content="중고마켓 | 판다마켓" />
+        <meta name="twitter:description" content="일상의 모든 물건을 거래해보세요" />
+        <meta name="twitter:image" content="/img/og-img.png" />
+        <title>중고마켓 | 판다마켓</title>
+        <link rel="stylesheet" type="text/css" href="/css/style.css">
+        <link rel="stylesheet" type="text/css" href="/css/pages/auth/style.css">
+    </head>
+    <body>
+        <h1>🛒 중고마켓 페이지입니다.</h1>
+    </body>
+</html>
\ No newline at end of file