codeit-bootcamp-frontend · hbs0133 · Apr 26, 2024 · May 3, 2024 · May 10, 2024
diff --git a/.DS_Store b/.DS_Store
diff --git a/Images/.DS_Store b/Images/.DS_Store
diff --git a/Images/bottom-banner(panda-talking).png b/Images/bottom-banner(panda-talking).png
diff --git a/Images/home-content1.png b/Images/home-content1.png
diff --git a/Images/home-content2.png b/Images/home-content2.png
diff --git a/Images/home-content3.png b/Images/home-content3.png
diff --git a/Images/ic_facebook.png b/Images/ic_facebook.png
diff --git a/Images/ic_google.png b/Images/ic_google.png
diff --git a/Images/ic_instagram.png b/Images/ic_instagram.png
diff --git a/Images/ic_kakaotalk.png b/Images/ic_kakaotalk.png
diff --git a/Images/ic_twitter.png b/Images/ic_twitter.png
diff --git a/Images/ic_visibility.png b/Images/ic_visibility.png
diff --git a/Images/ic_youtube.png b/Images/ic_youtube.png
diff --git a/Images/pandamarket-logo(1).png b/Images/pandamarket-logo(1).png
diff --git a/Images/pandamarket-logo.png b/Images/pandamarket-logo.png
diff --git a/Images/top-banner(panda-hello).png b/Images/top-banner(panda-hello).png
diff --git a/Pages/login.html b/Pages/login.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- Reset CSS -->
+    <link rel="stylesheet" href="/styles/reset.css">
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="/styles/auth.css">
+  <title>판다마켓/로그인</title>
+</head>
+<body>
+  <div class="form-container">
+    <header class="form-header">
+      <a href="/">
+        <img class="form-logo" src="/images/pandamarket-logo.png" alt="판다마켓로고 이미지" />
+      </a>
+    </header>
+    <form id="loginForm" class="form" action="/login">
+      <div class="input-container">
+        <label class="form-label" for="email">
+          이메일
+        </label>
+        <input class="form-input" type="text" id="email" name="email" placeholder="이메일을 입력해주세요"/>
+      </div>
+      <div class="input-container position-relative">
+        <label class="form-label" for="password">
+          비밀번호
+        </label>
+        <input class="form-input" type="password" id="password" name="password" placeholder="비밀번호를 입력해주세요" />
+        <img class="ic-visivility" src="/images/ic_visibility.png" alt="비밀번호를 보거나 가릴수있는 토글기능의 눈모양 아이콘" />
+      </div>
+      <button class="form-btn" type="submit">로그인</button>
+    </form>
+    <footer class="form-footer">
+      <div class="oauth-login-container">
+        <span>간편 로그인하기</span>
+        <div class="oauth-login-container-links">
+          <a href="https://www.google.com/"><img src="/images/ic_google.png" alt="구글 로그인 아이콘" /></a>
+          <a href="https://www.kakaocorp.com/page/"><img src="/images/ic_kakaotalk.png" alt="카카오톡 로그인 아이콘" /></a>
+        </div>
+      </div>
+      <div class="auth-link">
+        <span>판다마켓이 처음이신가요? <a href="/pages/signup.html">회원가입</a></span>
+      </div>
+    </footer>
+  </div>
+</body>
+</html>
diff --git a/Pages/signup.html b/Pages/signup.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- Reset CSS -->
+    <link rel="stylesheet" href="/styles/reset.css">
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="/styles/auth.css">
+  <title>판다마켓/회원가입</title>
+</head>
+<body>
+  <div class="form-container">
+    <header class="form-header">
+      <a href="/">
+        <img class="form-logo" src="/images/pandamarket-logo.png" alt="판다마켓로고 이미지" />
+      </a>
+    </header>
+    <form id="signForm" class="form" action="/signin">
+      <div class="input-container">
+        <label class="form-label" for="email">
+          이메일
+        </label>
+        <input class="form-input" type="text" id="email" name="email" placeholder="이메일을 입력해주세요"/>
+      </div>
+      <div class="input-container">
+        <label class="form-label" for="nickname">
+          닉네임
+        </label>
+        <input class="form-input" type="text" id="nickname" name="nickname" placeholder="닉네임을 입력해주세요"/>
+      </div>
+      <div class="input-container position-relative">
+        <label class="form-label" for="password">
+          비밀번호
+        </label>
+        <input class="form-input" type="password" id="password" name="password" placeholder="비밀번호를 입력해주세요"/>
+        <img class="ic-visivility" src="/images/ic_visibility.png" alt="비밀번호를 보거나 가릴수있는 토글기능의 눈모양 아이콘" />
+      </div>
+      <div class="input-container position-relative">
+        <label class="form-label" for="passwordConfirm">
+          비밀번호 확인
+        </label>
+        <input class="form-input" type="password" id="passwordConfirm" name="passwordConfirm" placeholder="비밀번호를 다시 한 번 입력해주세요"/>
+        <img class="ic-visivility" src="/images/ic_visibility.png" alt="비밀번호를 보거나 가릴수있는 토글기능의 눈모양 아이콘" />
+      </div>
+      <button class="form-btn" type="submit">회원가입</button>
+    </form>
+    <footer class="form-footer">
+      <div class="oauth-login-container">
+        <span>간편 로그인하기</span>
+        <div class="oauth-login-container-links">
+          <a href="https://www.google.com/"><img src="/images/ic_google.png" alt="구글로그인 아이콘" /></a>
+          <a href="https://www.kakaocorp.com/page/"><img src="/images/ic_kakaotalk.png" alt="카카오톡 로그인 아이콘" /></a>
+        </div>
+      </div>
+      <div class="auth-link">
+        <span>이미 회원이신가요? <a href="/pages/login.html">로그인</a></span>
+      </div>
+    </footer>
+  </div>
+</body>
+</html>
diff --git a/Styles/auth.css b/Styles/auth.css
@@ -0,0 +1,113 @@
+/* Form CSS */
+
+.form-container{
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: 24px;
+  width: 100%;
+  height: 100%;
+}
+
+/* Form Header */
+.form-header{
+  margin-top: 60px;
+}
+.form-logo {
+  width: 369px;
+  height: 132px;
+}
+
+/* Form Content*/
+.form{
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  width: 640px;
+}
+.input-container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.position-relative{
+  position: relative;
+}
+.form-label{
+  font-size: 18px;
+  font-weight: 700;
+}
+.form-input{
+  width: inherit;
+  height: 56px;
+  padding: 0 23px;
+  border: none;
+  border-radius: 12px;
+  background-color: var(--gray100);
+}
+.form-input::placeholder{
+  font-size: 16px;
+  font-weight: 400;
+  color: var(--gray400);
+  line-height: 24px;
+}
+.form-input:focus{
+  border: 1px solid var(--blue);
+}
+.ic-visivility{
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  bottom: 16px;
+  right: 23px;
+  cursor: pointer;
+}
+
+.form-btn {
+  height: 56px;
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--white);
+  border: none;
+  border-radius: 40px;
+  background-color: var(--gray400);
+  cursor: pointer;
+}
+
+
+/* Form Footer */
+.form-footer{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+  width: 640px;
+  margin-bottom: 60px;
+}
+.oauth-login-container{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: inherit;
+  height: 74px;
+  padding: 0 23px;
+  border-radius: 8px;
+  background-color: #E6F2FF;
+}
+.oauth-login-container span{
+  font-size: 16px;
+  font-weight: 500;
+}
+.oauth-login-container-links{
+  display: flex;
+  gap: 16px;
+  align-items: center;
+}
+.auth-link{
+  font-size: 15px;
+  font-weight: 500;
+}
+.auth-link a{
+  color: var(--blue);
+  text-decoration: underline;
+}