[이지현] Sprint4

css/common/auth.css

@@ -1,3 +1,5 @@
+@import 'variables.css';
+
 html, body {
     display: flex;
     flex-direction: column;
@@ -6,8 +8,8 @@ html, body {
 }
 
 .logo {
-    width: auto;
-    height: 132px;
+    width: 396px;
+    height: auto;
     margin: 0 122px;
 }
 
@@ -25,8 +27,8 @@ html, body {
     margin-bottom: 24px;
 }
 
-input {
-    width: 640px;
+.auth-input {
+    width: 100%;
     height: 56px;
     margin-top: 16px;
     border: none;
@@ -39,18 +41,25 @@ input {
     padding: 16px 24px 14px; 
 }
 
-input::placeholder {
+
+.auth-input::placeholder {
     color: var(--gray400);
     font-weight: 400;
     font-size: 16px;
     line-height: 26px;
     letter-spacing: 0%;
 }
 
-/* #pwd {
-    padding: 16px 24px 16px;
-} */
-
+.message {
+    font-style: normal;
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 24px;
+    margin-top: 8px;
+    margin-left: 16px;
+    color: var(--red);
+    height: 24px;
+}
 
 .password {
     display: flex;
@@ -66,14 +75,14 @@ input::placeholder {
     top: 32px;
 }
 
-.pwd-icon {
+.pwd-icons {
     width: 100%;
     height: 100%;
 }
 
 .submit-btn button {
     color: var(--gray100);
-    background-color: var(--blue);
+    background-color: var(--blue100);
     width: 640px;
     height: 56px;
     text-align: center;
@@ -93,7 +102,7 @@ input::placeholder {
     gap: 10px;
     width: 640px;
     height: 74px;
-    background: #E6F2FF; /* 배경색 */
+    background: var(--background); /* 배경색 */
     border-radius: 8px;
 
     flex: none;
@@ -129,7 +138,7 @@ input::placeholder {
 }
 
 .move-page a {
-    color: var(--blue);
+    color: var(--blue100);
     text-decoration: underline;
 }
 
@@ -138,12 +147,9 @@ input::placeholder {
     body {
         margin: 190px 52px 325px;
     }
-
-
 }
 
-@media (max-width: 767px) and (min-width: 375px) {
-
+@media (max-width: 767px) {
     .logo-a {
         display: flex;
         justify-content: center;
@@ -161,7 +167,7 @@ input::placeholder {
         margin: 0 auto;
     }
 
-    input {
+    .auth-input {
         width: 100%;
     }
 

css/common/variables.css

@@ -8,5 +8,11 @@
     --gray200 : #E5E7EB;
     --gray100 : #F3F4F6;
     --gray50: #F9FAFB;
-    --blue: #3692FF;
+    --blue100: #3692FF;
+    --blue200: #1967D6;
+    --blue300: #1251AA;
+    --red: #F74747;
+    --white: #FFFFFF;
+    --background: #E6F2FF;
+    --skyblue: #CFE5FF;
 } 

css/pages/home.css

@@ -1,6 +1,5 @@
-/* home.css */
+@import '../common/variables.css';
 
-/* 페이지 스타일 */
 body {
     margin: 0 auto;
 }
@@ -15,14 +14,14 @@ body {
     height: 70px;
     position: sticky;
     top: 0;
-    background-color: #FFFFFF;
+    background-color: var(--white);
 }
 
 h2 {
     font-size: 40px;
     font-weight: 700;
     line-height: 56px;
-    color: #374151;
+    color: var(--gray700);
 }
 
 a {
@@ -31,14 +30,14 @@ a {
 
 .logo img {
     width: 153px;
-    height: 51px;
+    height: auto;
 }
 
 .login-btn {
-    background-color: #3692FF;
+    background-color: var(--blue100);
     border: none;
     border-radius: 8px;
-    color: #F3F4F6;
+    color: var(--gray100);
     font-size: 16px;
     font-weight: 600;
     line-height: 48px;
@@ -50,7 +49,7 @@ a {
 }
 
 .background {
-    background-color: #CFE5FF;
+    background-color: var(--skyblue);
     display: flex;
 
 }
@@ -84,8 +83,8 @@ a {
 
 .items-btn {
     display: inline-block;
-    background-color: #3692FF;
-    color: #F3F4F6;
+    background-color: var(--blue100);
+    color: var(--gray100);
     border-radius: 40px;
     border: none;
     font-size: 20px;
@@ -130,7 +129,7 @@ a {
 }
 
 .description h4 {
-    color: #3692FF;
+    color: var(--blue100);
     font-size: 18px;
     font-weight: 700;
     line-height: 26px;
@@ -145,7 +144,7 @@ a {
     font-size: 24px;
     font-weight: 500;
     line-height: 32px;
-    color: #374151;
+    color: var(--gray700);
 }
 
 .bottom-img {
@@ -154,13 +153,13 @@ a {
 }
 
 footer {
-    background-color: #111827;
+    background-color: var(--gray900);
     justify-content: center;
     height: 160px;
 }
 
 .footer-container {
-    color: #9CA3AF;
+    color: var(--gray400);
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -192,7 +191,7 @@ footer {
 
 .privacy-faq a {
     text-decoration: none;
-    color: #E5E7EB;
+    color: var(--gray200);
 
 
 }
@@ -223,7 +222,7 @@ footer {
         font-size: 40px;
         font-weight: 700;
         line-height: 56px;
-        color: #374151;
+        color: var(--gray700);
     }
 
     .background {
@@ -383,14 +382,14 @@ footer {
 
     .privacy-faq a {
         text-decoration: none;
-        color: #E5E7EB;
+        color: var(--gray200);
     }
 
 }
 
 
 
-@media (max-width: 767px) and (min-width: 375px){
+@media (max-width: 767px) {
     .logo {
         margin-left: 16px;
     }
@@ -547,7 +546,7 @@ footer {
 
     .privacy-faq a {
         text-decoration: none;
-        color: #E5E7EB;
+        color: var(--gray200);
     }
 
     .icons {

css/pages/login.css

@@ -11,6 +11,4 @@ main {
     body {
         margin: 80px 16px 231px;
     }
-
-
 }

css/pages/signup.css

@@ -1,3 +1,3 @@
 body {
-    margin: 60px 640px;
-}
+    margin: 60px auto;
+}

index.html

@@ -1,24 +1,35 @@
 <!DOCTYPE html>
 <html lang="ko">
 <head>
+    <title>판다마켓</title>
+    <meta name="description" content="일상의 모든 물건을 거래해보세요">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <!-- Facebook Meta Tags -->
     <meta property="og:url" content="https://pandamarket-leejihyun.netlify.app/">
     <meta property="og:title" content="판다마켓 - 이지현">
     <meta property="og:type" content="website">
     <meta property="og:image" content="/assets/images/img_home_01.png">
     <meta property="og:description" content="일상의 모든 물건을 거래해보세요">
+
+    <!-- Twitter Meta Tags -->
+    <meta name="twitter:card" content="summary_large_image">
+    <meta property="twitter:domain" content="pandamarket-leejihyun.netlify.app">
+    <meta property="twitter:url" content="https://pandamarket-leejihyun.netlify.app/">
+    <meta name="twitter:title" content="판다마켓 - 이지현">
+    <meta name="twitter:description" content="일상의 모든 물건을 거래해보세요">
+    <meta name="twitter:image" content="/assets/images/img_home_01.png">
     <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css" />
     <link rel="stylesheet" href="/css/common/reset.css">
     <link rel="stylesheet" href="/css/pages/home.css">
-    <title>판다마켓</title>
 </head>
 <body>
     <header class="global-nav">
         <div class="logo">
             <img src="/assets/logo/logo.png" alt="판다마켓 로고">
         </div>
-        <a class="login-btn" href="login.html">로그인</a>
+        <a class="login-btn" href="/pages/login.html">로그인</a>
     </header>
     <main>
         <section class="background top">
@@ -27,7 +38,7 @@ <h2>
                     <span class="line-break">일상의 모든 물건을</span>
                     거래해보세요
                 </h2>
-                <a class="items-btn" href="items.html">구경하러 가기</a>
+                <a class="items-btn" href="/pages/items.html">구경하러 가기</a>
             </div>
             <img class="top-img" src="/assets/images/img_home_top.png" alt="메인 페이지 위쪽 이미지">
         </section>
@@ -68,8 +79,8 @@ <h2>믿을 수 있는<br> 판다마켓 중고거래</h2>
         <div class="footer-container">
             <h5>@codeit-2024</h5>
             <div class="privacy-faq">
-                <a href="privacy.html">Privacy Policy</a>
-                <a href="faq.html">FAQ</a>
+                <a href="/pages/privacy.html">Privacy Policy</a>
+                <a href="/pages/faq.html">FAQ</a>
             </div>
             <ul class="icons">
                 <li>