Skip to content

Commit

Permalink
Merge pull request #27 from codesquad-memeber-2020/feature/js/#14
Browse files Browse the repository at this point in the history 
feat: 생년월일 구현
  • Loading branch information
@Elllin
Elllin authored Mar 27, 2020
2 parents daab983 + 890a022 commit 6e3c5a3
Show file tree
Hide file tree
Showing 4 changed files with 163 additions and 42 deletions.
15 changes: 15 additions & 0 deletions frontend/constants/message.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,3 +34,18 @@ export const INTERESTS_MESSAGE = {
DEFAULT: `관심사를 3개까지 등록 가능합니다.`,
SUCCESS: `관심사를 최대치까지 등록하셨습니다.`
};

export const BIRTHDAY_MESSAGE = {
NUMBER: `숫자만 입력해 주세요`,
YEAR: {
DEFAULT: `태어난 년도 4자리를 정확하게 입력하세요.`,
ERROR: `만 14세 이상만 가입 가능합니다.`
},
MONTH: {
DEFAULT: `태어난 월을 선택하세요.`
},
DAY: {
DEFAULT: `태어난 일(날짜) 2자리를 정확하게 입력하세요.`,
ERROR: `태어난 날짜를 다시 확인해주세요.`
}
};
154 changes: 124 additions & 30 deletions frontend/js/signUp_ellin.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import RegExp from "/constants/RegExp.js";
import validationState from "./validationState.js";
import {
PASSWORD_MESSAGE,
PASSWORD_RECONFIRM_MESSAGE
PASSWORD_RECONFIRM_MESSAGE,
BIRTHDAY_MESSAGE
} from "/constants/message.js";

(function() {
Expand All @@ -16,13 +18,9 @@ const selector = {
};

const messageArea = {
PASSWORD: ".password_message",
PASSWORD_RECONFIRM: ".password_reconfirm_message"
};

const inputValue = {
password: false,
passwordReconfirm: false
password: document.querySelector(".password_message"),
passwordReconfirm: document.querySelector(".password_reconfirm_message"),
birthday: document.querySelector(".birthday_message")
};

function eventHandler({ target: { id, value } }) {
Expand All @@ -35,24 +33,30 @@ function eventHandler({ target: { id, value } }) {

case selector.PASSWORD_RECONFIRM:
validatePasswordReconfirm(value);
break;

case birthday.YEAR:

case birthday.MONTH:
case birthday.DAY:
validateBirthday(id, value, birthday);
break;
}
}

function validatePassword(password) {
const passwordMessageArea = document.querySelector(messageArea.PASSWORD);
const safetyRegExp = RegExp.PASSWORD.SAFETY;
const safetyMessage = PASSWORD_MESSAGE.SAFETY;

if (isBlank(password))
printMessage(PASSWORD_MESSAGE.DEFAULT, passwordMessageArea);
else if (isValidValue(safetyRegExp, password)) {
printMessage(safetyMessage, passwordMessageArea, "#00c850");
return (inputValue.password = password);
} else validateFailure(password, passwordMessageArea);
return printMessage(PASSWORD_MESSAGE.DEFAULT, messageArea.password);

if (isValidValue(safetyRegExp, password)) {
printMessage(safetyMessage, messageArea.password, "#00c850");
return (validationState.password = password);
}

return validateFailure(password, messageArea.password);
}

function isBlank(value) {
Expand All @@ -64,16 +68,21 @@ function validateFailure(password, messageArea) {
const regexp = RegExp.PASSWORD;
const passwordLengthRange = password.length < 8 || password.length > 16;

if (passwordLengthRange) printMessage(message.LENGTH, messageArea);
else if (!isValidValue(regexp.NUMBER, password))
printMessage(message.NUMBER, messageArea);
else if (!isValidValue(regexp.UPPERCASE, password))
printMessage(message.UPPERCASE, messageArea);
else if (!isValidValue(regexp.SPECIAL, password))
printMessage(message.SPECIAL, messageArea);
else if (!isValidValue(regexp.LOWERCASE, password))
printMessage(message.LOWERCASE, messageArea);
else printMessage(message.ETC, messageArea);
if (passwordLengthRange) return printMessage(message.LENGTH, messageArea);

if (!isValidValue(regexp.UPPERCASE, password))
return printMessage(message.UPPERCASE, messageArea);

if (!isValidValue(regexp.NUMBER, password))
return printMessage(message.NUMBER, messageArea);

if (!isValidValue(regexp.SPECIAL, password))
return printMessage(message.SPECIAL, messageArea);

if (!isValidValue(regexp.LOWERCASE, password))
return printMessage(message.LOWERCASE, messageArea);

return printMessage(message.ETC, messageArea);
}

function printMessage(message, messageArea, color = "#EB0000") {
Expand All @@ -86,13 +95,98 @@ function isValidValue(regexp, value) {
}

function validatePasswordReconfirm(value) {
const passwordMessageArea = document.querySelector(
messageArea.PASSWORD_RECONFIRM
);
const successMessage = PASSWORD_RECONFIRM_MESSAGE.SUCCESS;
const errorMessage = PASSWORD_RECONFIRM_MESSAGE.ERROR;

if (value === inputValue.password)
printMessage(successMessage, passwordMessageArea, "#00c850");
else printMessage(errorMessage, passwordMessageArea);
if (value === validationState.password)
return printMessage(
successMessage,
messageArea.passwordReconfirm,
"#00c850"
);

return printMessage(errorMessage, messageArea.passwordReconfirm);
}

function validateBirthday(id, value, birthday) {
const birthdayValue = parseInt(value);
const yearMessage = BIRTHDAY_MESSAGE.YEAR.DEFAULT;
const monthMessage = BIRTHDAY_MESSAGE.MONTH.DEFAULT;
const dayMessage = BIRTHDAY_MESSAGE.DAY.DEFAULT;
const numberMessage = BIRTHDAY_MESSAGE.NUMBER;

switch (id) {
case birthday.YEAR:
if (isBlank(value))
return printMessage(yearMessage, messageArea.birthday);
if (isNaN(birthdayValue))
return printMessage(numberMessage, messageArea.birthday);
validateBirthdayYear(birthdayValue);
break;

case birthday.MONTH:
if (isBlank(value))
return printMessage(monthMessage, messageArea.birthday);
validationState.birthdayMonth = birthdayValue;
break;

case birthday.DAY:
if (isBlank(value)) return printMessage(dayMessage, messageArea.birthday);
if (isNaN(birthdayValue))
return printMessage(numberMessage, messageArea.birthday);
validateBirthdayDay(birthdayValue);
break;
}
}

function validateBirthdayYear(year) {
const yearLength = year.toString().length === 4;
const yearMessage = BIRTHDAY_MESSAGE.YEAR.DEFAULT;
const yearErrorMessage = BIRTHDAY_MESSAGE.YEAR.ERROR;
if (!yearLength) return printMessage(yearMessage, messageArea.birthday);

if (!isYaerRange(year))
return printMessage(yearErrorMessage, messageArea.birthday);

removeMessage();
validationState.birthdayYear = year;
}

function isYaerRange(year) {
const currentYear = new Date().getFullYear();
const startYear = currentYear - 15 + 1;
const lastYear = currentYear - 99 + 1;

if (startYear >= year && lastYear <= year) return true;

return false;
}

function validateBirthdayDay(day) {
const dayLength = day.toString().length === 2;
const dayMessage = BIRTHDAY_MESSAGE.DAY.DEFAULT;
const dayErrorMessage = BIRTHDAY_MESSAGE.DAY.ERROR;

if (!dayLength) return printMessage(dayMessage, messageArea.birthday);

if (!isDayRange(day))
return printMessage(dayErrorMessage, messageArea.birthday);

removeMessage();
validationState.birthdayDay = day;
}

function isDayRange(day) {
const correctDay = new Date(
validationState.birthdayYear,
validationState.birthdayMonth,
0
).getDate();

if (day > 0 && day <= correctDay) return true;
return false;
}

function removeMessage() {
return (messageArea.birthday.innerText = "");
}
14 changes: 14 additions & 0 deletions frontend/js/validationState.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
const validationState = {
id: false,
password: false,
email: false,
name: false,
phone_number: false,
clause: false,
password: false,
passwordReconfirm: false,
birthdayYear: false,
birthdayMonth: false,
birthdayDay: false
};
export default validationState;
22 changes: 10 additions & 12 deletions frontend/signUp.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@
<link rel="stylesheet" href="./css/singup.css" />
<title>회원가입</title>
</head>

<body>
<div class="sign_up_wrap">
<div class="sign_up_title">
Expand All @@ -22,9 +21,9 @@ <h1>회원가입</h1>
<fieldset>
<div class="join_row">
<h3 class="join_title">
<label for="id">아이디</label>
<label for="user_id">아이디</label>
</h3>
<input type="text" id="id" name="id" class="join_box" />
<input type="text" id="user_id" name="user_id" class="join_box" />
<span class="ID_message"></span>
</div>
<div class="join_row">
Expand Down Expand Up @@ -53,12 +52,12 @@ <h3 class="join_title">
</div>
<div class="join_row">
<h3 class="join_title">
<label for="user_name">이름</label>
<label for="name">이름</label>
</h3>
<input
type="text"
id="user_name"
name="user_name"
id="name"
name="name"
class="join_box"
/>
</div>
Expand Down Expand Up @@ -103,6 +102,7 @@ <h3 class="join_title">생년월일</h3>
/>
</div>
</div>
<span class="birthday_message"></span>
</div>
<div class="join_row">
<h3 class="join_title">
Expand Down Expand Up @@ -169,9 +169,9 @@ <h3 class="join_title"><label for="interest">관심사</label></h3>
<div class="madal_content">
<strong>1. 개인정보처리방침의 의의</strong><br><br>
개인정보처리방침은 다음과 같은 중요한 의미를 가지고 있습니다.
스토어가 어떤 정보를 수집하고, 수집한 정보를 어떻게 사용하며, 필요에 따라 누구와 이를 공유(‘위탁’ 또는 ‘제공’)하며, 이용목적을 달성한 정보를 언제/어떻게 파기하는지 등 ‘개인정보 한살이’와 관련한 정보를 투명하게 제공합니다.
스토어가 어떤 정보를 수집하고, 수집한 정보를 어떻게 사용하며, 필요에 따라 누구와 이를 공유('위탁' 또는 '제공')하며, 이용목적을 달성한 정보를 언제/어떻게 파기하는지 등 '개인정보 한살이'와 관련한 정보를 투명하게 제공합니다.
정보주체로서 이용자는 자신의 개인정보에 대해 어떤 권리를 가지고 있으며, 이를 어떤 방법과 절차로 행사할 수 있는지를 알려 드립니다. 또한, 개인정보 침해사고가 발생하는 경우, 추가적인 피해를 예방하고 이미 발생한 피해를 복구하기 위해 누구에게 연락하여 어떤 도움을 받을 수 있는지 알려 드립니다.
그 무엇보다도, 개인정보와 관련하여 회사와 이용자간의 권리 및 의무 관계를 규정하여 이용자의 ‘개인정보자기결정권’을 보장하는 수단이 됩니다.
그 무엇보다도, 개인정보와 관련하여 회사와 이용자간의 권리 및 의무 관계를 규정하여 이용자의 '개인정보자기결정권'을 보장하는 수단이 됩니다.
회사는 본 개인정보처리방침을 정보통신망법을 기준으로 작성하였으며, 스토어 내에서의 이용자 개인정보 처리현황을 최대한 알기 쉽고 상세하게 설명하기 위해 노력하였습니다.<br><br><br>
<strong>2. 수집하는 개인정보</strong><br><br>
이용자는 회원가입 및 유료 컨텐츠 구입 없이도 컨텐츠 설명 및 미리보기 등이 가능합니다. 이용자가 스티커 등의 유료 컨텐츠 구입시 회사는 서비스 제공(컨텐츠 판매 등의 계약 이행)을 위해 최소한의 개인정보를 수집합니다. <br><br>
Expand All @@ -181,14 +181,12 @@ <h3 class="join_title"><label for="interest">관심사</label></h3>
유료 상품 구입시 결제/구매에 관한 내역을 이용자에게 알려주기 위하여, 이메일 주소를 수집할 수 있습니다
</div>
<div class="madal_agree_btn">
<button>동의</button>
<button>동의</button disabled >
</div>
</div>
</div>
</div>
<script src="./js/signUp.js" type="module"></script>
<script src="./js/signUp_ellin.js" type="module"></script>
</body>
</html>


</html>

0 comments on commit 6e3c5a3

Please sign in to comment.