From 890a022d3a5efe85dfb3e412779fc9a258fd5592 Mon Sep 17 00:00:00 2001 From: noto01 Date: Fri, 27 Mar 2020 16:26:04 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EC=83=9D=EB=85=84=EC=9B=94=EC=9D=BC=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/constants/message.js | 15 ++++ frontend/js/signUp_ellin.js | 154 ++++++++++++++++++++++++++------- frontend/js/validationState.js | 14 +++ frontend/signUp.html | 22 +++-- 4 files changed, 163 insertions(+), 42 deletions(-) create mode 100644 frontend/js/validationState.js diff --git a/frontend/constants/message.js b/frontend/constants/message.js index d8cbe81..4be28e8 100644 --- a/frontend/constants/message.js +++ b/frontend/constants/message.js @@ -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: `태어난 날짜를 다시 확인해주세요.` + } +}; diff --git a/frontend/js/signUp_ellin.js b/frontend/js/signUp_ellin.js index d029cf5..64787fd 100644 --- a/frontend/js/signUp_ellin.js +++ b/frontend/js/signUp_ellin.js @@ -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() { @@ -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 } }) { @@ -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) { @@ -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") { @@ -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 = ""); } diff --git a/frontend/js/validationState.js b/frontend/js/validationState.js new file mode 100644 index 0000000..d01b491 --- /dev/null +++ b/frontend/js/validationState.js @@ -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; diff --git a/frontend/signUp.html b/frontend/signUp.html index 93a54ce..56073a8 100644 --- a/frontend/signUp.html +++ b/frontend/signUp.html @@ -11,7 +11,6 @@ 회원가입 -
+

@@ -169,9 +169,9 @@

1. 개인정보처리방침의 의의

개인정보처리방침은 다음과 같은 중요한 의미를 가지고 있습니다. - 스토어가 어떤 정보를 수집하고, 수집한 정보를 어떻게 사용하며, 필요에 따라 누구와 이를 공유(‘위탁’ 또는 ‘제공’)하며, 이용목적을 달성한 정보를 언제/어떻게 파기하는지 등 ‘개인정보 한살이’와 관련한 정보를 투명하게 제공합니다. + 스토어가 어떤 정보를 수집하고, 수집한 정보를 어떻게 사용하며, 필요에 따라 누구와 이를 공유('위탁' 또는 '제공')하며, 이용목적을 달성한 정보를 언제/어떻게 파기하는지 등 '개인정보 한살이'와 관련한 정보를 투명하게 제공합니다. 정보주체로서 이용자는 자신의 개인정보에 대해 어떤 권리를 가지고 있으며, 이를 어떤 방법과 절차로 행사할 수 있는지를 알려 드립니다. 또한, 개인정보 침해사고가 발생하는 경우, 추가적인 피해를 예방하고 이미 발생한 피해를 복구하기 위해 누구에게 연락하여 어떤 도움을 받을 수 있는지 알려 드립니다. - 그 무엇보다도, 개인정보와 관련하여 회사와 이용자간의 권리 및 의무 관계를 규정하여 이용자의 ‘개인정보자기결정권’을 보장하는 수단이 됩니다. + 그 무엇보다도, 개인정보와 관련하여 회사와 이용자간의 권리 및 의무 관계를 규정하여 이용자의 '개인정보자기결정권'을 보장하는 수단이 됩니다. 회사는 본 개인정보처리방침을 정보통신망법을 기준으로 작성하였으며, 스토어 내에서의 이용자 개인정보 처리현황을 최대한 알기 쉽고 상세하게 설명하기 위해 노력하였습니다.


2. 수집하는 개인정보

이용자는 회원가입 및 유료 컨텐츠 구입 없이도 컨텐츠 설명 및 미리보기 등이 가능합니다. 이용자가 스티커 등의 유료 컨텐츠 구입시 회사는 서비스 제공(컨텐츠 판매 등의 계약 이행)을 위해 최소한의 개인정보를 수집합니다.

@@ -181,7 +181,7 @@

유료 상품 구입시 결제/구매에 관한 내역을 이용자에게 알려주기 위하여, 이메일 주소를 수집할 수 있습니다
- +
@@ -189,6 +189,4 @@

- - - + \ No newline at end of file