codeit-bootcamp-frontend · addiescode-sj · May 14, 2025 · Apr 29, 2025 · Apr 30, 2025 · May 3, 2025
diff --git a/.github/login.html b/.github/login.html
diff --git a/.github/.vscode/launch.json → .vscode/launch.json b/.github/.vscode/launch.json → .vscode/launch.json
diff --git a/.github/FAQ.html → FAQ.html b/.github/FAQ.html → FAQ.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="ko">
     <head>
         <title>
            FAQ

diff --git a/.github/index.html → index.html b/.github/index.html → index.html
@@ -1,15 +1,16 @@
 <!DOCTYPE html>
 <html lang="ko">
-
     <head>
         <meta charset = "utf-8">
-        <title>판다마켓</title>
+        <title>
+            판다마켓
+        </title>
         <link rel = "stylesheet" href = "style.css"> 
     </head>
     <!-- header 부분 시작 -->
     <body>
         <header>
-            <nav class = "top">
+            <nav class = "navigationBar">
                 <a href = "/" aria-label = "홈으로 이동">
                     <img src = "pandamarket_images/Property 1=sm.png" alt = "판다마켓 로고">
                 </a>

diff --git a/.github/items.html → items.html b/.github/items.html → items.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="ko">
     <head>
         <title>
             items

diff --git a/login.html b/login.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="ko">
+    <head>
+        <title>
+            판다마켓 로그인
+        </title>
+        <meta charset = "utf-8">
+        <link rel = "stylesheet" href = "style.css">
+    </head>
+    <header class = "login_logo">
+    <a href = "/" aria-label = "홈으로 이동">
+        <img src = "pandamarket_images/Property 1=sm@2x.png" alt  = "판다마켓 로고">
+    </a>
+    </header>
+    <!-- body -->
+    <body>
+        <div class = "login_signup_container">
-        <div class = "login_signup_container">
+        <div class="login_signup_container">
-        <div class = "login_signup_container">
+        <div class="login_signup_container">
+            <label for = "email">
+                이메일
+            </label>
+            <input type = "email" placeholder = "이메일" id = "email" name = "email" required/>
+
+                <label for = "nickname">
+                    비밀번호
+                </label>
+            <div class = "password_box">
+                <input type = "password" placeholder = "비밀번호" id = "password" name = "password" required/>
+                <img src = "pandamarket_images/closed_eye.png" alt = "비밀번호 숨기기 아이콘" class = "eye_icon"/>
+            </div>
+            <button type = "submit" class = "login_signup_button">
+                로그인
+            </button>
+            <div class = "easy_login_container">
+                <div class = "easy_login_form">
+                    <p>
+                        간편 로그인하기
+                    </p>
+                    <div>
+                        <a href = "https://www.google.com/" aria-label = "구글로 간편 로그인" class = "easy_login_link_icon">
+                            <img src = "pandamarket_images/Component 2.png" alt = "구글">
+                        </a>
+                        <a href = "https://www.kakaocorp.com/page/" aria-label = "카카오톡으로 간편 로그인" class = "easy_login_link_icon">
+                            <img src = "pandamarket_images/Component 3.png" alt = "카카오톡">
+                        </a>    
+                    </div>
+                </div>
+            </div>
+            <div class = "direction_text_box">
+                판다마켓은 처음이신가요?
+                <a href = "/signup.html" aria-label = "회원가입 화면으로 이동">회원가입</a>
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/pandamarket_images/Component 2.png b/pandamarket_images/Component 2.png
diff --git a/pandamarket_images/Component 2@2x.png b/pandamarket_images/Component 2@2x.png
diff --git a/pandamarket_images/Component 2@3x.png b/pandamarket_images/Component 2@3x.png
diff --git a/pandamarket_images/Component 3.png b/pandamarket_images/Component 3.png
diff --git a/pandamarket_images/Component 3@2x.png b/pandamarket_images/Component 3@2x.png
diff --git a/pandamarket_images/Component 3@3x.png b/pandamarket_images/Component 3@3x.png
diff --git a/.github/pandamarket_images/Img_home_01.png → pandamarket_images/Img_home_01.png b/.github/pandamarket_images/Img_home_01.png → pandamarket_images/Img_home_01.png
diff --git a/.github/pandamarket_images/Img_home_02.png → pandamarket_images/Img_home_02.png b/.github/pandamarket_images/Img_home_02.png → pandamarket_images/Img_home_02.png
diff --git a/.github/pandamarket_images/Img_home_03.png → pandamarket_images/Img_home_03.png b/.github/pandamarket_images/Img_home_03.png → pandamarket_images/Img_home_03.png
diff --git a/...ub/pandamarket_images/Img_home_bottom.png → pandamarket_images/Img_home_bottom.png b/...ub/pandamarket_images/Img_home_bottom.png → pandamarket_images/Img_home_bottom.png
diff --git a/.github/pandamarket_images/Img_home_top.png → pandamarket_images/Img_home_top.png b/.github/pandamarket_images/Img_home_top.png → pandamarket_images/Img_home_top.png
diff --git a/...ub/pandamarket_images/Img_reply_empty.png → pandamarket_images/Img_reply_empty.png b/...ub/pandamarket_images/Img_reply_empty.png → pandamarket_images/Img_reply_empty.png
diff --git a/.github/pandamarket_images/Property 1=sm.png → pandamarket_images/Property 1=sm.png b/.github/pandamarket_images/Property 1=sm.png → pandamarket_images/Property 1=sm.png
diff --git a/...b/pandamarket_images/Property 1=sm@2x.png → pandamarket_images/Property 1=sm@2x.png b/...b/pandamarket_images/Property 1=sm@2x.png → pandamarket_images/Property 1=sm@2x.png
diff --git a/...b/pandamarket_images/Property 1=sm@3x.png → pandamarket_images/Property 1=sm@3x.png b/...b/pandamarket_images/Property 1=sm@3x.png → pandamarket_images/Property 1=sm@3x.png
diff --git a/.github/pandamarket_images/btn_small.png → pandamarket_images/btn_small.png b/.github/pandamarket_images/btn_small.png → pandamarket_images/btn_small.png
diff --git a/pandamarket_images/closed_eye.png b/pandamarket_images/closed_eye.png
diff --git a/.github/pandamarket_images/desktop_01.png → pandamarket_images/desktop_01.png b/.github/pandamarket_images/desktop_01.png → pandamarket_images/desktop_01.png
diff --git a/.github/pandamarket_images/desktop_02.png → pandamarket_images/desktop_02.png b/.github/pandamarket_images/desktop_02.png → pandamarket_images/desktop_02.png
diff --git a/.github/pandamarket_images/desktop_03.png → pandamarket_images/desktop_03.png b/.github/pandamarket_images/desktop_03.png → pandamarket_images/desktop_03.png
diff --git a/.github/pandamarket_images/desktop_04.png → pandamarket_images/desktop_04.png b/.github/pandamarket_images/desktop_04.png → pandamarket_images/desktop_04.png
diff --git a/.github/pandamarket_images/desktop_05.png → pandamarket_images/desktop_05.png b/.github/pandamarket_images/desktop_05.png → pandamarket_images/desktop_05.png
diff --git a/.github/pandamarket_images/ic_facebook.png → pandamarket_images/ic_facebook.png b/.github/pandamarket_images/ic_facebook.png → pandamarket_images/ic_facebook.png
diff --git a/.github/pandamarket_images/ic_instagram.png → pandamarket_images/ic_instagram.png b/.github/pandamarket_images/ic_instagram.png → pandamarket_images/ic_instagram.png
diff --git a/.github/pandamarket_images/ic_twitter.png → pandamarket_images/ic_twitter.png b/.github/pandamarket_images/ic_twitter.png → pandamarket_images/ic_twitter.png
diff --git a/.github/pandamarket_images/ic_youtube.png → pandamarket_images/ic_youtube.png b/.github/pandamarket_images/ic_youtube.png → pandamarket_images/ic_youtube.png
diff --git a/.github/pandamarket_images/mobile_01.png → pandamarket_images/mobile_01.png b/.github/pandamarket_images/mobile_01.png → pandamarket_images/mobile_01.png
diff --git a/.github/pandamarket_images/mobile_02.png → pandamarket_images/mobile_02.png b/.github/pandamarket_images/mobile_02.png → pandamarket_images/mobile_02.png
diff --git a/.github/pandamarket_images/mobile_03.png → pandamarket_images/mobile_03.png b/.github/pandamarket_images/mobile_03.png → pandamarket_images/mobile_03.png
diff --git a/.github/pandamarket_images/mobile_04.png → pandamarket_images/mobile_04.png b/.github/pandamarket_images/mobile_04.png → pandamarket_images/mobile_04.png
diff --git a/.github/pandamarket_images/mobile_05.png → pandamarket_images/mobile_05.png b/.github/pandamarket_images/mobile_05.png → pandamarket_images/mobile_05.png
diff --git a/pandamarket_images/opened_eye.png b/pandamarket_images/opened_eye.png
diff --git a/.github/pandamarket_images/state=active.png → pandamarket_images/state=active.png b/.github/pandamarket_images/state=active.png → pandamarket_images/state=active.png
diff --git a/.github/pandamarket_images/tablet_01.png → pandamarket_images/tablet_01.png b/.github/pandamarket_images/tablet_01.png → pandamarket_images/tablet_01.png
diff --git a/.github/pandamarket_images/tablet_02.png → pandamarket_images/tablet_02.png b/.github/pandamarket_images/tablet_02.png → pandamarket_images/tablet_02.png
diff --git a/.github/pandamarket_images/tablet_03.png → pandamarket_images/tablet_03.png b/.github/pandamarket_images/tablet_03.png → pandamarket_images/tablet_03.png
diff --git a/.github/pandamarket_images/tablet_04.png → pandamarket_images/tablet_04.png b/.github/pandamarket_images/tablet_04.png → pandamarket_images/tablet_04.png
diff --git a/.github/pandamarket_images/tablet_05.png → pandamarket_images/tablet_05.png b/.github/pandamarket_images/tablet_05.png → pandamarket_images/tablet_05.png
diff --git a/.github/privacy.html → privacy.html b/.github/privacy.html → privacy.html
diff --git a/signup.html b/signup.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="ko">
+    <head>
+        <title>
+            판다마켓 회원가입
+        </title>
+        <meta charset = "utf-8">
+        <link rel = "stylesheet" href = "style.css">
+    </head>
+    <header class = "signup_logo">
+    <a href = "/" aria-label = "홈으로 이동">
+        <img src = "pandamarket_images/Property 1=sm@2x.png" alt  = "판다마켓 로고">
+    </a>
+    </header>
+    <!-- body -->
+    <body>
+        <div class = "login_signup_container">
+            <label for = "email">
+                이메일
+            </label>
+            <input type = "email" placeholder = "이메일" id = "email" name = "email" required/>
+            <label for = "nickname">
+                닉네임
+            </label>
+            <input type = "text" placeholder = "닉네임" id = "nickname" name = "nickname" required/>
+            <label for = "password">
+                비밀번호
+            </label>
+            <div class = "password_box">
+                <input type = "password" placeholder = "비밀번호" id = "password" name="password" required/>
+                <img src = "pandamarket_images/closed_eye.png" alt = "비밀번호 숨기기 아이콘" class = "eye_icon"/>
+            </div>
+            <label for = "confirm-password">
+                비밀번호 확인
+            </label>
+            <div class = "password_box">
+                <input type = "password" placeholder = "비밀번호 확인" id = "confirm-password" name = "confirm-password" required/>
+                <img src = "pandamarket_images/opened_eye.png" alt = "비밀번호 보이기 아이콘" class = "eye_icon"/>
+            </div>
+            <button type = "submit" class = "login_signup_button">
+                회원가입
+            </button>
+                <div class = "easy_login_container">
+                    <div class = "easy_login_form">
+                        <p>
+                            간편 로그인하기
+                        </p>
+                        <div>
+                            <a href = "https://www.google.com/" aria-label = "구글로 간편 로그인" class = "easy_login_link_icon">
+                                <img src = "pandamarket_images/Component 2.png" alt = "구글">
+                            </a>
+                            <a href = "https://www.kakaocorp.com/page/" aria-label = "카카오톡으로 간편 로그인" class = "easy_login_link_icon">
+                                <img src = "pandamarket_images/Component 3.png" alt = "카카오톡">
+                            </a>    
+                        </div>
+                    </div>
+                </div>
+                <div class = "direction_text_box">
+                    이미 회원이신가요?
+                    <a href = "/login.html" aria-label = "로그인 화면으로 이동">로그인</a>
+                </div>
+        </div>    
+    </body>
+</html>
diff --git a/.github/style.css → style.css b/.github/style.css → style.css
@@ -30,13 +30,17 @@ body {
 
 }
 @media (max-width: 1920px) {
-    .top {
+    .navigationBar {
         display: flex;
-        justify-content: space-between;
+        justify-content: space-around;
         align-items: center;
-
-        margin-left: 200px;
-        margin-right: 200px;
+        position:fixed;  /*미션2 추가 사항 */
+        width: 100%;
+        z-index: 2;
+        background-color: #FFFFFF;
+        top: 0;
+        left: 0;
+        padding: 0 clamp(1rem, 20vw, 3rem);
     }
 }
 
@@ -196,4 +200,102 @@ footer {
 .social_icons {
     width: 116px;
     height: 20px;
-}
+}
+
+/* 로그인, 회원가입 부분 스타일 시작 */
+.login_logo  {
+    display: flex;
+    justify-content: center;
+    margin-top: 150px;
+    margin-bottom: 10px;
+}
+
+.signup_logo {
+    display: flex;
+    justify-content: center;
+    margin-top: 50px;
+    margin-bottom: 10px;
+}
+
+.login_signup_container {
+    width: 100%;
+    max-width: 400px;
+    margin: 0 auto;
+    font-family: sans-serif;
+  }
+
+label {
+    display: block;
+    margin: 16px 0 6px;
+    font-weight: bold;
+  }
+
+input[type = "email"],
+input[type = "password"],
+input[type = "text"] {
+    width: 100%;
+    padding: 12px;
+    border: none;
+    background-color: #f5f6f8;
+    border-radius: 6px;
+}
+
+.password_box {
+    position: relative;
+    width: 100%;
+    background-color: #f5f6f8;
+    border: none;
+    border-radius: 8px;
+    box-sizing: border-box;
+}
+
+.eye_icon {
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 20px;
+    height: 20px;
+}
+
+.login_signup_button {
+    width: 100%;
+    margin-top: 15px;
+    margin-bottom: 15px;
+    padding: 12px;
+    background-color: #3692ff;
+    border: none;
+    border-radius: 30px;
+    color: white;
+    font-weight: bold;
+}
+
+.easy_login_container {    
+    background-color: #E6F2FF;
+    padding: 16px 23px 16px 23px;
+    border-radius: 8px;
+    gap: 10px;
+
+}
+
+.easy_login_form {
+    display: flex;
+    justify-content: space-between;
+    font-size: 16px;
+}
+
+.easy_login_link_icon {
+    box-sizing: border-box;
+    text-decoration: none;
+}
+
+.direction_text_box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 10px;
+    gap: 5px;
+    font-size: 13px;
+    font-weight: bold;
+}
+/* 로그인, 회원가입 부분 스타일 끝 */