Merge pull request #60 from gjrefa9139/Basic-조규진-sprint2

[조규진]Sprint2
codeit-bootcamp-frontend · Jun 3, 2024 · acdf8f4 · acdf8f4
2 parents 6983f1f + e5db409
commit acdf8f4
Show file tree

Hide file tree

Showing 25 changed files with 288 additions and 40 deletions.
diff --git a/faq.html b/faq.html
@@ -16,6 +16,6 @@
   </head>
 
   <body>
-    <img src="images/panda/market_logo.png" alt="판다마켓">
+    <img src="images/panda/panda_logo.png" alt="판다마켓">
   </body>
 </html>
diff --git a/images/icon/invisible.png b/images/icon/invisible.png
diff --git a/images/icon/visible.png b/images/icon/visible.png
diff --git a/images/panda/favicon.ico b/images/panda/favicon.ico
diff --git a/images/panda/market_logo.png b/images/panda/market_logo.png
diff --git a/images/panda/panda.png b/images/panda/panda.png
diff --git a/images/panda/panda_logo.png b/images/panda/panda_logo.png
diff --git a/images/social/ic_facebook.png b/images/social/ic_facebook.png
diff --git a/images/social/ic_facebook.svg b/images/social/ic_facebook.svg
diff --git a/images/social/ic_google.png b/images/social/ic_google.png
diff --git a/images/social/ic_instagram.png b/images/social/ic_instagram.png
diff --git a/images/social/ic_instagram.svg b/images/social/ic_instagram.svg
diff --git a/images/social/ic_kakaotalk.png b/images/social/ic_kakaotalk.png
diff --git a/images/social/ic_twitter.png b/images/social/ic_twitter.png
diff --git a/images/social/ic_twitter.svg b/images/social/ic_twitter.svg
diff --git a/images/social/ic_youtube.png b/images/social/ic_youtube.png
diff --git a/images/social/ic_youtube.svg b/images/social/ic_youtube.svg
diff --git a/index.html b/index.html
@@ -11,16 +11,16 @@
       >
     <link rel="stylesheet" href="styles/global.css">
     <link rel="stylesheet" href="styles/home.css">
-    <link rel="icon" href="images/panda/favicon.ico">
+    <link rel="icon" href="images/panda/panda.png">
     <title>판다마켓</title>
   </head>
 
   <body>
     <header>
       <a href="/">
         <img
-          src="images/panda/market_logo.png"
-          alt="판다마켓"
+          src="images/panda/panda_logo.png"
+          alt="판다마켓 홈"
           width="153"
           >
       </a>
@@ -113,16 +113,16 @@ <h1>
       </div>
       <div class="socialMedia">
         <a href="https://www.facebook.com/" target="_blank" rel="noopener noreferrer">
-          <img src="images\social\ic_facebook.svg" alt="페이스북">
+          <img src="images\social\ic_facebook.png" alt="페이스북" width="20px">
         </a>
         <a href="https://twitter.com/" target="_blank" rel="noopener noreferrer">
-          <img src="images\social\ic_twitter.svg" alt="트위터">
+          <img src="images\social\ic_twitter.png" alt="트위터" width="20px">
         </a>
         <a href="https://www.youtube.com/" target="_blank" rel="noopener noreferrer">
-          <img src="images\social\ic_youtube.svg" alt="유튜브">
+          <img src="images\social\ic_youtube.png" alt="유튜브" width="20px">
         </a>
         <a href="https://www.instagram.com/" target="_blank" rel="noopener noreferrer">
-          <img src="images\social\ic_instagram.svg" alt="인스타그램">
+          <img src="images\social\ic_instagram.png" alt="인스타그램" width="20px">
         </a>
       </div>
     </footer>

diff --git a/items.html b/items.html
@@ -16,6 +16,6 @@
   </head>
 
   <body>
-    <img src="images/panda/market_logo.png" alt="판다마켓">
+    <img src="images/panda/panda_logo.png" alt="판다마켓">
   </body>
 </html>
diff --git a/login.html b/login.html
@@ -10,12 +10,76 @@
       href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css"
       >
     <link rel="stylesheet" href="styles/global.css">
-    <link rel="stylesheet" href="styles/pandaaaa.css">
-    <link rel="icon" href="images/panda/favicon.ico">
+    <link rel="stylesheet" href="styles/auth.css">
+    <link rel="icon" href="images/panda/panda.png">
     <title>판다마켓 - 로그인</title>
   </head>
 
   <body>
-    <img src="images/panda/market_logo.png" alt="판다마켓">
+    <div class="auth-container">
+      <div class="home-logo">
+        <a href="/">
+          <img src="images/panda/panda_logo.png" alt="판다마켓 홈" width="396">
+        </a>
+      </div>
+
+      <form method="post">
+        <div class="input-info">
+          <label for="email">이메일</label>
+          <input
+            id="email"
+            name="email"
+            type="email"
+            placeholder="이메일을 입력해 주세요"
+            >
+        </div>
+        <div class="input-info">
+          <label for="password">비밀번호</label>
+          <div class="input-wrapper">
+            <input
+              id="password"
+              name="password"
+              type="password"
+              placeholder="비밀번호를 입력해 주세요"
+              >
+            <img
+              src="images/icon/invisible.png"
+              alt="비밀번호 숨김"
+              class="toggle-password"
+              width="24"
+              >
+          </div>
+        </div>
+
+        <button type="submit" class="button pill">
+          로그인
+        </button>
+      </form>
+
+      <div class="social-login">
+        <h3>간편 로그인하기</h3>
+        <div class="social-login-buttons">
+          <a href="https://www.google.com/" target="_blank" rel="noopener noreferrer">
+            <img
+              src="images/social/ic_google.png"
+              alt="구글 로그인"
+              width="42"
+              >
+          </a>
+          <a href="https://www.kakaocorp.com/page/" target="_blank" rel="noopener noreferrer">
+            <img
+              src="images/social/ic_kakaotalk.png"
+              alt="카카오톡 로그인"
+              width="42"
+              >
+          </a>
+        </div>
+      </div>
+
+      <div class="auth-switch">
+        판다마켓이 처음이신가요?
+        <a href="singin.html">회원가입</a>
+      </div>
+    </div>
   </body>
 </html>
diff --git a/privacy.html b/privacy.html
@@ -16,6 +16,6 @@
   </head>
 
   <body>
-    <img src="images/panda/market_logo.png" alt="판다마켓">
+    <img src="images/panda/panda_logo.png" alt="판다마켓">
   </body>
 </html>
diff --git a/singin.html b/singin.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <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="styles/global.css">
+    <link rel="stylesheet" href="styles/auth.css">
+    <link rel="icon" href="images/panda/panda.png">
+    <title>판다마켓 - 회원가입</title>
+  </head>
+
+  <body>
+    <div class="auth-container">
+      <div class="home-logo">
+        <a href="/">
+          <img src="images/panda/panda_logo.png" alt="판다마켓 홈" width="396">
+        </a>
+      </div>
+
+      <form method="post">
+        <div class="input-info">
+          <label for="email">이메일</label>
+          <input
+            id="email"
+            name="email"
+            type="email"
+            placeholder="이메일을 입력해 주세요"
+            >
+        </div>
+        <div class="input-info">
+          <label for="nickname">닉네임</label>
+          <input
+            id="nickname"
+            name="nickname"
+            type="text"
+            placeholder="닉네임을 입력해 주세요"
+            >
+        </div>
+        <div class="input-info">
+          <label for="password">비밀번호</label>
+          <div class="input-wrapper">
+            <input
+              id="password"
+              name="password"
+              type="password"
+              placeholder="비밀번호를 입력해 주세요"
+              >
+            <img
+              src="images/icon/invisible.png"
+              alt="비밀번호 숨김"
+              class="toggle-password"
+              width="24"
+              >
+          </div>
+        </div>
+        <div class="input-info">
+          <label for="check-PW">비밀번호 확인</label>
+          <div class="input-wrapper">
+            <input
+              id="check-PW"
+              name="check-PW"
+              type="password"
+              placeholder="비밀번호를 다시 한 번 입력해 주세요"
+              >
+            <img
+              src="images/icon/invisible.png"
+              alt="비밀번호 숨김"
+              class="toggle-password"
+              width="24"
+              >
+          </div>
+        </div>
+
+        <button type="submit" class="button pill">
+          회원가입
+        </button>
+      </form>
+
+      <div class="social-login">
+        <h3>간편 로그인하기</h3>
+        <div class="social-login-buttons">
+          <a href="https://www.google.com/" target="_blank" rel="noopener noreferrer">
+            <img
+              src="images/social/ic_google.png"
+              alt="구글 로그인"
+              width="42"
+              >
+          </a>
+          <a href="https://www.kakaocorp.com/page/" target="_blank" rel="noopener noreferrer">
+            <img
+              src="images/social/ic_kakaotalk.png"
+              alt="카카오톡 로그인"
+              width="42"
+              >
+          </a>
+        </div>
+      </div>
+
+      <div class="auth-switch">
+        이미 회원이신가요? <a href="login.html">로그인</a>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/styles/auth.css b/styles/auth.css
@@ -0,0 +1,89 @@
+.pill.button {
+  width: 100%;
+}
+
+.auth-container {
+  max-width: 640px;
+  margin: 0 auto;
+}
+
+.home-logo {
+  display: block;
+  text-align: center;
+  margin-top: 60px;
+  margin-bottom: 40px;
+}
+
+.input-info {
+  margin-bottom: 24px;
+  display: flex;
+  flex-direction: column;
+}
+
+label {
+  display: block;
+  margin-bottom: 16px;
+  font-size: 18px;
+  font-weight: 700;
+}
+
+input {
+  padding: 16px 24px;
+  background-color: #f3f4f6;
+  border: none;
+  border-radius: 12px;
+  font-size: 16px;
+  line-height: 24px;
+  width: 100%;
+}
+
+input::placeholder {
+  color: #9ca3af;
+  font-size: 16px;
+  line-height: 24px;
+}
+
+.input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.toggle-password {
+  position: absolute;
+  right: 24px;
+  cursor: pointer;
+}
+
+.social-login {
+  background-color: #e6f2ff;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 23px;
+  margin: 24px 0;
+}
+
+.social-login h3 {
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 24px;
+}
+
+.social-login-buttons {
+  display: flex;
+  gap: 16px;
+}
+
+.auth-switch {
+  font-weight: 500;
+  font-size: 15px;
+  text-align: center;
+}
+
+.auth-switch a {
+  color: #3182f6;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
diff --git a/styles/global.css b/styles/global.css
@@ -21,6 +21,10 @@ header {
   border-bottom: 1px solid #dfdfdf;
 }
 
+main {
+  margin-top: 70px;
+}
+
 footer {
   background-color: #111827;
   color: #9ca3af;
@@ -69,6 +73,13 @@ img {
   pointer-events: none;
 }
 
+.pill.button {
+  font-size: 20px;
+  font-weight: 600;
+  border-radius: 40px;
+  padding: 16px 124px;
+}
+
 .banner {
   background-color: #cfe5ff;
   height: 540px;
-Original file line number
+Diff line change
@@ Expand Up / @@ -16,6 +16,6 @@ @@
       </head>
       <body>
-        <img src="images/panda/market_logo.png" alt="판다마켓">
+        <img src="images/panda/panda_logo.png" alt="판다마켓">
       </body>
     </html>