4주차 위클리미션 수정

refactor(mentor) - 모듈 적용 - 수정사항 반영하여 코드 리팩토링
codeit-bootcamp-frontend · Nov 19, 2023 · 19c0b81 · 19c0b81
1 parent f8d1729
commit 19c0b81
Show file tree

Hide file tree

Showing 13 changed files with 547 additions and 0 deletions.
diff --git a/week5/css/reset.css b/week5/css/reset.css
@@ -0,0 +1,15 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+input {
+  outline: none;
+  background: none;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
diff --git a/week5/css/style.css b/week5/css/style.css
@@ -0,0 +1,183 @@
+@charset "utf-8";
+
+:root {
+  --main-bg-color: #f0f6ff;
+  --primary-color: #6d6afe; 
+  --box-border-color: #ccd5e3;
+  --white-color: #fff;
+  --black-color: #373740;
+  --btn-color: #f5f5f5;
+  --sns-bg-color: #e7effb;
+  --red-color: #ff5b56; 
+}
+
+body {
+  font-family: 'Pretendard';
+  background-color: var(--main-bg-color);
+}
+
+.container {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+}
+
+.inner-wrap {
+  max-width: 400px;
+  margin: 0 auto;
+}
+
+.join-member .logo {
+  text-align: center;
+}
+
+.join-member .logo img {
+  width: 210px;
+}
+
+.join-member .logo span {
+  overflow: hidden;
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  clip-path: rect(0 0 0 0);
+}
+
+.join-link {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  margin: 16px 0 0;
+}
+
+.join-link .btn-join {
+  color: var(--primary-color);
+  font-weight: 600;
+  line-height: 19px;
+  border-bottom: 1px solid var(--primary-color);
+}
+
+.form-wrap {
+  margin: 30px 0 0;
+}
+
+.form-wrap label {
+  display: block;
+  margin: 0 0 12px 0;
+  font-size: 14px;
+  line-height: 16px;
+}
+
+.form-wrap input {
+  width: 100%;
+  padding: 18px 15px;
+  color: var(--black-color);
+  border-radius: 8px;
+  border: 1px solid var(--box-border-color);
+  background-color: var(--white-color);
+}
+
+.form-wrap input:focus {
+  border: 1px solid var(--primary-color);
+}
+
+.active {
+  border: 1px solid var(--red-color) !important;
+}
+
+.error-messeage {
+  margin: 6px 0 0;
+  color: var(--red-color);
+  font-size: 14px;
+  line-height: 16px;
+}
+
+.form-box + .form-box {
+  margin: 24px 0 0;
+}
+
+.form-box .user-password {
+  position: relative;
+}
+
+.form-box .user-password img[class*="eye"] {
+  position: absolute;
+  top: 50%;
+  right: 15px;
+  transform: translateY(-50%);
+  cursor: pointer;
+}
+
+.btn-box {
+  margin: 30px 0 0;
+}
+
+.btn-box button {
+  display: block;
+  width: 100%;
+  padding: 16px 20px;
+  border: 0;
+  border-radius: 8px;
+  text-align: center;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 21px;
+  cursor: pointer;
+  color: var(--btn-color);
+  background: linear-gradient(90.99deg, #6D6AFE 0.12%, #6AE3FE 101.84%);
+}
+
+.sns-login {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 32px 0 0;
+  padding: 12px 24px;
+  border-radius: 8px;
+  font-size: 14px;
+  line-height: 16px;
+  border: 1px solid var(--box-border-color);
+  background-color: var(--sns-bg-color);
+}
+
+.sns-login .title {
+  font-size: 14px;
+  line-height: 16px;
+  color: var(--black-color);
+}
+
+.sns-login ul {
+  overflow: hidden;
+  list-style-type: none;
+}
+
+.sns-login ul li {
+  float: left;
+  margin: 0 16px 0 0;
+}
+
+.sns-login ul li:last-child {
+  margin: 0;
+}
+
+.sns-login ul li a {
+  display: block;
+  overflow: hidden;
+  width: 42px;
+  height: 42px;
+  text-indent: 100%;    
+  white-space: nowrap;    
+}
+
+.sns-login ul li .google {
+  background: url('../images/ico-google.png') no-repeat;
+  background-size: 100% 42px;
+}
+
+.sns-login ul li .kakao {
+  background: url('../images/ico-kakao.png') no-repeat;
+  background-size: 100% 42px;
+}
diff --git a/week5/folder.html b/week5/folder.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>folder</title>
+</head>
+</html>
diff --git a/week5/images/ico-eye-off.svg b/week5/images/ico-eye-off.svg
diff --git a/week5/images/ico-eye-on.svg b/week5/images/ico-eye-on.svg
diff --git a/week5/images/ico-google.png b/week5/images/ico-google.png
diff --git a/week5/images/ico-kakao.png b/week5/images/ico-kakao.png
diff --git a/week5/images/logo.svg b/week5/images/logo.svg
diff --git a/week5/js/signin.js b/week5/js/signin.js
@@ -0,0 +1,49 @@
+import { correct, errorMessage, emptyInput, errorPrint } from "./utils.js";
+
+const input = document.querySelectorAll('.input');
+const eye = document.querySelectorAll('.eye');
+const pwInput = document.getElementById('signin-password');
+const emailInput = document.getElementById('signin-email');
+const btnLogin = document.querySelector('.btn-login');
+
+// 로그인 버튼 클릭 시 페이지 이동
+function login(e){
+  e.preventDefault();
+
+  const { email, password } = correct.userInfo;
+
+  if(emailInput.value !== '' && pwInput.value !== ''){
+    if(emailInput.value === email && pwInput.value === password) {
+      location.href = './folder.html';
+    }else{
+      emailInput.classList.add('active');
+      pwInput.classList.add('active');
+      errorPrint(emailInput, errorMessage.check);
+      errorPrint(pwInput, errorMessage.check);
+    }
+  }else{
+    emailInput.classList.add('active');
+    pwInput.classList.add('active');
+    errorPrint(emailInput, errorMessage.empty);
+    errorPrint(pwInput, errorMessage.empty);
+  }
+}
+
+// 눈 아이콘 클릭 시 이미지 및 타입 변경
+function eyeToggle(e){
+  e.preventDefault();
+
+  if(e.target.src.indexOf('off') > -1){
+    e.target.src = './images/ico-eye-on.svg';
+    pwInput.type = 'password';
+  }else{
+    e.target.src = './images/ico-eye-off.svg';
+    pwInput.type = 'text';
+  }
+}
+
+btnLogin.addEventListener('click', login);
+eye.forEach((el) => el.addEventListener('click', eyeToggle))
+input.forEach((el) => {el.addEventListener('focusout', emptyInput)})
+
+
diff --git a/week5/js/signup.js b/week5/js/signup.js
@@ -0,0 +1,59 @@
+import { correct, errorMessage, emptyInput, errorPrint, pwCheckInput } from "./utils.js";
+
+const input = document.querySelectorAll('.input');
+const pwInput = document.getElementById('signup-password');
+const emailInput = document.getElementById('signup-email');
+const eye = document.querySelectorAll('.eye');
+const btnJoin = document.querySelector('.btn-box .btn-join');
+
+// 회원가입 버튼 클릭 시 페이지 이동
+function join(e){
+  e.preventDefault();
+
+  const { email } = correct.userInfo;
+
+  if(emailInput.value !== email){
+    if(pwInput.value !== '' && pwCheckInput.value !== '') location.href = './folder.html';
+  }else{
+    emailInput.classList.add('active');
+    errorPrint(emailInput, errorMessage.incorrect);
+  }
+
+  if(emailInput.value === '' && pwInput.value === '') {
+    emailInput.classList.add('active');
+    pwInput.classList.add('active');
+    errorPrint(emailInput, errorMessage.empty);
+    errorPrint(pwInput, errorMessage.empty);
+  }
+}
+
+// 비밀번호, 비밀번호 확인 일치여부
+function pwCheck(){
+  if(pwInput.value !== '' && pwCheckInput.value !== ''){
+    if(pwInput.value !== pwCheckInput.value){
+      pwCheckInput.classList.add('active');
+      errorPrint(pwCheckInput, errorMessage.incorrect)
+    }
+  }
+}
+
+// 눈 아이콘 클릭 시 이미지 및 타입 변경
+function eyeToggle(e){
+  e.preventDefault();
+
+  if(e.target.src.indexOf('off') > -1){
+    e.target.src = './images/ico-eye-on.svg';
+    pwInput.type = 'password';
+  }else{
+    e.target.src = './images/ico-eye-off.svg';
+    pwInput.type = 'text';
+  }
+}
+
+btnJoin.addEventListener('click', join);
+eye.forEach((el) => el.addEventListener('click', eyeToggle))
+input.forEach((el) => {el.addEventListener('focusout', ({ target }) => {
+  emptyInput({ target });
+  pwCheck();   
+})})
+