refactor: 스프린트 미션2

codeit-bootcamp-frontend · Mar 22, 2024 · d8eb5d2 · d8eb5d2
1 parent 9001c0f
commit d8eb5d2
Show file tree

Hide file tree

Showing 10 changed files with 269 additions and 0 deletions.
diff --git a/css/base.css b/css/base.css
@@ -12,8 +12,11 @@
   --gray200: #e5e7eb;
   --gray100: #e8ebed;
   --gray50: #f7f7f8;
+  --cool-gray-100: #f3f4f6;
+  --cool-gray-400: #9ca3af;
   --primary-color: #3692ff;
   --error-color: #f74747;
+  --Brand-blue: #3182f6;
 }
 a:hover {
   cursor: pointer;
@@ -22,6 +25,10 @@ a:hover {
   color: #ffffff;
   background-color: var(--primary-color);
 }
+.btn--secondary {
+  color: #ffffff;
+  background-color: var(--cool-gray-400);
+}
 .btn:hover {
   background-color: #1967d6;
 }
diff --git a/css/login.css b/css/login.css
@@ -0,0 +1,82 @@
+.login {
+  width: 640px;
+  margin: 60px auto;
+}
+.logo {
+  display: flex;
+  justify-content: center;
+}
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  margin-top: 40px;
+}
+label {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--gray800);
+}
+input {
+  width: 100%;
+  border-radius: 12px;
+  border: none;
+  height: 56px;
+  padding: 16px 24px;
+  background-color: var(--cool-gray-100);
+}
+input:focus {
+  outline: 2px solid #3692ff;
+}
+input::placeholder {
+  color: var(--cool-gray-400);
+}
+.pw-box {
+  position: relative;
+}
+.pw-box img {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  margin: auto 20px;
+  cursor: pointer;
+}
+
+button {
+  width: 100%;
+  height: 56px;
+  border: none;
+  border-radius: 40px;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.social-login {
+  width: 100%;
+  height: 74px;
+  margin: 24px 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #e6f2ff;
+  border-radius: 8px;
+  padding: 25px 23px;
+  gap: 16px;
+}
+.social-login p {
+  flex-grow: 2;
+}
+.social-login img {
+  width: 42px;
+  height: 42px;
+}
+.signup {
+  font-size: 15px;
+  font-weight: 500;
+  text-align: center;
+}
+.signup a {
+  text-decoration: underline;
+  color: var(--Brand-blue);
+}
diff --git a/images/btn_visibility_off.png b/images/btn_visibility_off.png
diff --git a/images/ic_google.png b/images/ic_google.png
diff --git a/images/ic_kakaotalk.png b/images/ic_kakaotalk.png
diff --git a/images/logo_big.png b/images/logo_big.png
diff --git a/javascript/login.js b/javascript/login.js
@@ -0,0 +1,21 @@
+const loginEmail = document.getElementById("email");
+const loginPw = document.getElementById("password");
+const loginBtn = document.getElementById("btn-login");
+
+function color() {
+  if (
+    loginEmail.value.length > 0 &&
+    loginEmail.value.indexOf("@") !== -1 &&
+    loginPw.value.length >= 5
+  ) {
+    loginBtn.style.backgroundColor = "#3692ff";
+    loginBtn.style.cursor = "pointer";
+    loginBtn.disabled = false;
+  } else {
+    loginBtn.disabled = true;
+    loginBtn.style.backgroundColor = "#9ca3af";
+  }
+}
+
+loginEmail.addEventListener("keyup", color);
+loginPw.addEventListener("keyup", color);
diff --git a/javascript/signup.js b/javascript/signup.js
@@ -0,0 +1,27 @@
+const signupEmail = document.getElementById("email");
+const signupPw = document.getElementById("password");
+const signupName = document.getElementById("nickname");
+const signupPwCheck = document.getElementById("password-check");
+const signupBtn = document.getElementById("btn-signup");
+
+function color() {
+  if (
+    signupEmail.value.length > 0 &&
+    signupEmail.value.indexOf("@") !== -1 &&
+    signupName.value.length > 0 &&
+    signupPw.value.length >= 5 &&
+    signupPw.value == signupPwCheck.value
+  ) {
+    signupBtn.style.backgroundColor = "#3692ff";
+    signupBtn.style.cursor = "pointer";
+    signupBtn.disabled = false;
+  } else {
+    signupBtn.disabled = true;
+    signupBtn.style.backgroundColor = "#9ca3af";
+  }
+}
+
+signupEmail.addEventListener("keyup", color);
+signupName.addEventListener("keyup", color);
+signupPw.addEventListener("keyup", color);
+signupPwCheck.addEventListener("keyup", color);
diff --git a/login.html b/login.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>판다마켓</title>
+    <link rel="stylesheet" href="css/reset.css" />
+    <link rel="stylesheet" href="css/base.css" />
+    <link rel="stylesheet" href="css/login.css" />
+  </head>
+  <body>
+    <section class="login">
+      <a href="/index.html" class="logo">
+        <img src="images/logo_big.png" alt="logo" />
+      </a>
+      <form>
+        <label for="email">이메일</label>
+        <input
+          type="email"
+          name="email"
+          id="email"
+          placeholder="이메일을 입력해주세요"
+        />
+        <label for="password">비밀번호</label>
+        <div class="pw-box">
+          <input
+            type="password"
+            name="password"
+            id="password"
+            placeholder="비밀번호를 입력해주세요"
+          />
+          <img
+            src="/images/btn_visibility_off.png"
+            alt="button btn_visibility_off"
+          />
+        </div>
+
+        <button class="btn--secondary" id="btn-login">로그인</button>
+      </form>
+      <div class="social-login">
+        <p>간편로그인하기</p>
+        <a href="">
+          <img src="images/ic_google.png" alt="google login" />
+        </a>
+        <a href="">
+          <img src="images/ic_kakaotalk.png" alt="kakaotalk login" />
+        </a>
+      </div>
+      <p class="signup">
+        판다마켓이 처음이신가요?
+        <a href="/signup.html">회원가입</a>
+      </p>
+    </section>
+    <script src="javascript/login.js"></script>
+  </body>
+</html>
diff --git a/signup.html b/signup.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>판다마켓</title>
+    <link rel="stylesheet" href="css/reset.css" />
+    <link rel="stylesheet" href="css/base.css" />
+    <link rel="stylesheet" href="css/login.css" />
+  </head>
+  <body>
+    <section class="login">
+      <a href="/index.html" class="logo">
+        <img src="images/logo_big.png" alt="logo" />
+      </a>
+      <form>
+        <label for="email">이메일</label>
+        <input
+          type="email"
+          name="email"
+          id="email"
+          placeholder="이메일을 입력해주세요"
+        />
+        <label for="nickname">닉네임</label>
+        <input
+          type="text"
+          name="nickname"
+          id="nickname"
+          placeholder="닉네임을 입력해주세요"
+        />
+        <label for="password">비밀번호</label>
+        <div class="pw-box">
+          <input
+            type="password"
+            name="password"
+            id="password"
+            placeholder="비밀번호를 입력해주세요"
+          />
+          <img
+            src="/images/btn_visibility_off.png"
+            alt="button btn_visibility_off"
+          />
+        </div>
+        <label for="password-check">비밀번호 확인</label>
+        <div class="pw-box">
+          <input
+            type="password"
+            name="password-check"
+            id="password-check"
+            placeholder="비밀번호를 다시 한 번 입력해주세요"
+          />
+          <img
+            src="/images/btn_visibility_off.png"
+            alt="button btn_visibility_off"
+          />
+        </div>
+
+        <button class="btn--secondary" id="btn-signup">회원가입</button>
+      </form>
+      <div class="social-login">
+        <p>간편로그인하기</p>
+        <a href="">
+          <img src="images/ic_google.png" alt="google login" />
+        </a>
+        <a href="">
+          <img src="images/ic_kakaotalk.png" alt="kakaotalk login" />
+        </a>
+      </div>
+      <p class="signup">
+        이미 회원이신가요?
+        <a href="/login.html">로그인</a>
+      </p>
+      <script src="javascript/signup.js"></script>
+    </section>
+  </body>
+</html>