codeit-bootcamp-frontend · GANGYIKIM · Mar 27, 2025 · Mar 18, 2025 · Mar 19, 2025 · Mar 21, 2025
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/style2.css → auth.css b/style2.css → auth.css
@@ -1,14 +1,4 @@
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-:root {
-    view-transition-name: root;
-}
-
 html {
-    display: block;
     font-family: Pretendard;
 }
 
@@ -21,6 +11,11 @@ body {
     margin: 0 auto;
 }
 
+.logo2 {
+    width: 396px;
+    height: 132px;
+}
+
 .logo-wrap {
     display: block;
     text-align: center;
@@ -30,7 +25,6 @@ body {
 
 .form-group {
     margin-bottom: 20px;
-    gap: 24px;
 }
 
 .form-group label {
@@ -45,12 +39,12 @@ body {
     height: 48px;
     padding: 16px 24px;
     background-color: #f3f4f6;
-    border: none;
+    border: 1px solid #ccc;
     border-radius: 12px;
     font-size: 16px;
 }
 
-.form-group input ::placeholder {
+.form-group input::placeholder {
     font-size: 16px;
     color: #1f2937;
 }
@@ -60,21 +54,41 @@ body {
     justify-content: space-between;
     align-items: center;
     position: relative;
-    margin-bottom: 20px;
+    margin-bottom: 10px;
 }
 
 .password-button {
     position: absolute;
-    right: 24px;
-    width: 24;
-    height: 24;
+    right: 16px;
+    width: 24px;
+    height: 24px;
+    border: none;
+    background-color: transparent;
+    padding: 0;
+}
+
+.password-button img {
+    width: 100%;
+    height: auto;
+}
+
+input.error {
+    border-color: red;
+}
+
+.error-message {
+    color: red;
+    font-size: 14px;
+    margin-top: 8px;
+    display: block;
+    margin-left: 16px;
 }
 
 .login-button {
     width: 100%;
     border-radius: 40px;
     border: none;
-    padding: 16px 124px;
+    padding: 16px;
     color: #ffffff;
     font-size: 20px;
     font-weight: 700;
@@ -93,6 +107,11 @@ body {
     margin: 24px 0;
 }
 
+.login-button:disabled {
+    background-color: #9ca3af;
+    cursor: not-allowed;
+}
+
 .login-method h3 {
     font-size: 16px;
 }
@@ -109,7 +128,7 @@ body {
     text-align: center;
 }
 
-h3 {
+.social-login-button {
     font-weight: 500;
     font-size: 16px;
     line-height: 24px;
@@ -118,3 +137,24 @@ h3 {
 .signup-go a {
     color: #3182f6;
 }
+
+/* Mobile: 375px~767px */
+@media (max-width: 767px) {
+    .container {
+        max-width: 432px;
+        padding-left: 16px;
+        padding-right: 16px;
+        margin-top: 80px;
+    }
+    .logo2 {
+        width: 198px;
+        height: 66px;
+    }
+    .form-group label {
+        font-size: 14px;
+        margin-bottom: 8px;
+    }
+    .password-button {
+        right: 16px;
+    }
+}
diff --git a/deletepart.html b/deletepart.html
diff --git a/faq.html b/faq.html
@@ -0,0 +1 @@
+faq
diff --git a/fnq.html b/fnq.html
diff --git a/images/feature1-image.png → images/feature1.png b/images/feature1-image.png → images/feature1.png
diff --git a/images/feature2-image.png → images/feature2.png b/images/feature2-image.png → images/feature2.png
diff --git a/images/feature3-image.png → images/feature3.png b/images/feature3-image.png → images/feature3.png
diff --git a/images/ic_login.png b/images/ic_login.png
diff --git a/images/logo.png b/images/logo.png
diff --git a/index.html b/index.html
@@ -4,13 +4,14 @@
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>판다마켓</title>
+        <link rel="stylesheet" href="reset.css" />
         <link rel="stylesheet" href="style.css" />
     </head>
     <body>
         <header>
             <div class="header">
                 <a href="/"> <img src="images/logo.png" alt="판다마켓 로고" class="logo" /></a>
-                <a href="/login.html"> <img src="images/ic_login.png" alt="로그인" class="login" /></a>
+                <a href="/login.html" class="homelogin-button">로그인</a>
             </div>
         </header>
         <section class="headline-wrap">
@@ -20,37 +21,36 @@ <h1 class="headline-heading">
                         일상의 모든 물건을<br />
                         거래해 보세요
                     </h1>
-                    <a href="/items"> <h2 class="headline-button" alt="구경하러가기">구경하러 가기</h2></a>
+                    <a href="/items" class="headline-button">구경하러 가기</a>
                 </div>
                 <img class="headline-image" src="images/img_home_top.png" alt="판다" width="746px" height="340px" />
             </div>
         </section>
-
         <section id="features" class="wrapper">
             <div class="feature">
-                <img src="images/feature1-image.png" alt="인기 상품" width="50%" />
+                <img src="images/feature1.png" alt="인기 상품" />
                 <div class="feature-content">
                     <h2 class="feature-tag">Hot item</h2>
-                    <h1>인기 상품을<br />확인해 보세요</h1>
+                    <p class="feature-title">인기 상품을<br />확인해 보세요</p>
                     <p class="feature-description">가장 HOT한 중고거래 물품을<br />판다마켓에서 확인해 보세요</p>
                 </div>
             </div>
             <div class="feature">
                 <div class="feature-content">
                     <h2 class="feature-tag">Search</h2>
-                    <h1>구매를 원하는<br />상품을 검색하세요</h1>
+                    <p class="feature-title">구매를 원하는<br />상품을 검색하세요</p>
                     <p class="feature-description">
                         구매하고 싶은 물품은 검색해서
                         <br />쉽게 찾아보세요
                     </p>
                 </div>
-                <img src="images/feature2-image.png" alt="검색 기능" width="50%" />
+                <img src="images/feature2.png" alt="검색 기능" />
             </div>
             <div class="feature">
-                <img src="images/feature3-image.png" alt="판매 상품 등록" width="50%" />
+                <img src="images/feature3.png" alt="판매 상품 등록" />
                 <div class="feature-content">
                     <h2 class="feature-tag">Register</h2>
-                    <h1>판매를 원하는<br />상품을 등록하세요</h1>
+                    <p class="feature-title">판매를 원하는<br />상품을 등록하세요</p>
                     <p class="feature-description">
                         어떤 물건이든 판매하고 싶은 상품을
                         <br />쉽게 등록하세요
@@ -62,7 +62,7 @@ <h1>판매를 원하는<br />상품을 등록하세요</h1>
             <div class="wrapper">
                 <div class="banner-content">
                     <div>
-                        <h1>
+                        <h1 class="headline-heading">
                             믿을 수 있는
                             <br />
                             판다마켓 중고거래
@@ -80,13 +80,13 @@ <h1>
 
                 <div class="footer-two">
                     <a href="/privacy.html">Privacy Policy</a>
-                    <a href="/fnq.html">FAQ</a>
+                    <a href="/faq.html">FAQ</a>
                 </div>
 
                 <div class="footer-icons">
                     <a href="https://www.facebook.com">
-                        <img src="images/ic_facebook.png" alt="페이스북" id="facebook"
-                    /></a>
+                        <img src="images/ic_facebook.png" alt="페이스북" id="facebook" />
+                    </a>
                     <a href="https://www.twitter.com"> <img src="images/ic_twitter.png" alt="트위터" id="twitter" /></a>
                     <a href="https://www.youtube.com"> <img src="images/ic_youtube.png" alt="유튜브" id="youtube" /></a>
                     <a href="https://www.instagram.com">
@@ -95,5 +95,6 @@ <h1>
                 </div>
             </div>
         </footer>
+        <script src="validation.js"></script>
     </body>
 </html>
diff --git a/login.html b/login.html
@@ -4,31 +4,45 @@
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>판다마켓-로그인</title>
-        <link rel="stylesheet" href="style2.css" />
+        <link rel="stylesheet" href="reset.css" />
+        <link rel="stylesheet" href="auth.css" />
         <link rel="stylesheet" href="style.css" />
     </head>
     <body>
         <main class="container">
             <div class="logo-wrap">
-                <a href="/"> <img src="images/logo.png" alt="판다마켓 로고" /></a>
+                <a href="/"> <img src="images/logo.png" alt="판다마켓 로고" class="logo2" /></a>
             </div>
             <form method="post">
                 <div class="form-group">
                     <label for="email">이메일</label>
-                    <div><input type="email" id="email" name="email" placeholder="이메일을 입력해주세요" /></div>
+                    <div>
+                        <input
+                            type="email"
+                            id="email-login"
+                            name="email"
+                            placeholder="이메일을 입력해주세요"
+                            required />
+                        <span class="error-message"></span>
+                    </div>
                 </div>
                 <div class="form-group">
                     <label for="password">비밀번호</label>
                     <div class="password-wrap">
-                        <input type="password" id="password" name="password" placeholder="비밀번호를 입력해 주세요" />
-                        <!--<button class="password-button" type="button"><img href="images/unvisible_eye.png" /></button>-->
-                        <!--눈아이콘을 만들고 싶었는데 작동하지 않아요-->
+                        <input
+                            type="password"
+                            id="password-login"
+                            name="password"
+                            placeholder="비밀번호를 입력해 주세요"
+                            required />
+                        <button class="password-button" type="button"><img src="images/unvisible_eye.png" /></button>
                     </div>
+                    <span class="error-message"></span>
                 </div>
-                <button class="login-button" type="submit">로그인</button>
+                <button class="login-button" type="button" id="login-btn" disabled>로그인</button>
             </form>
             <div class="login-method-container">
-                <h3>간편 로그인하기</h3>
+                <h3 class="social-login-button">간편 로그인하기</h3>
                 <div class="login-method-wrap">
                     <a href="https://www.google.com/">
                         <img src="images/google_logo.png" alt="구글 로그인" width="42" />
@@ -40,5 +54,6 @@ <h3>간편 로그인하기</h3>
             </div>
             <div class="signup-go">판다마켓이 처음이신가요?<a href="signup.html">회원가입</a></div>
         </main>
+        <script src="validation.js"></script>
     </body>
 </html>