From 5f118e621e29e0c372e1f46e66e8d69006c1eb9f Mon Sep 17 00:00:00 2001 From: hyein Date: Tue, 8 Sep 2020 22:53:38 +0900 Subject: [PATCH 1/7] =?UTF-8?q?#212=20helpertext=20function=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../frontend/src/Components/ShowHelperText.js | 15 +++++++++++++++ .../src/Components/popup/LayerFindPassword.js | 15 ++------------- .../src/Components/popup/LayerJoin.js | 19 ++++--------------- .../src/Components/popup/LayerLogin.js | 17 +++-------------- 4 files changed, 24 insertions(+), 42 deletions(-) create mode 100644 packages/frontend/src/Components/ShowHelperText.js diff --git a/packages/frontend/src/Components/ShowHelperText.js b/packages/frontend/src/Components/ShowHelperText.js new file mode 100644 index 0000000..4308474 --- /dev/null +++ b/packages/frontend/src/Components/ShowHelperText.js @@ -0,0 +1,15 @@ +import React from "react"; +import FormHelperText from "@material-ui/core/FormHelperText"; + +// helper text 보여주기 +const showHelperText = (state) => { + if (state.value) { + return ( + + {state.getValidateText()} + + ); + } +}; + +export default showHelperText; diff --git a/packages/frontend/src/Components/popup/LayerFindPassword.js b/packages/frontend/src/Components/popup/LayerFindPassword.js index 3f5a055..4bef768 100644 --- a/packages/frontend/src/Components/popup/LayerFindPassword.js +++ b/packages/frontend/src/Components/popup/LayerFindPassword.js @@ -2,8 +2,8 @@ import React, { Component } from "react"; // import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; import TextField from "@material-ui/core/TextField"; import Button from "@material-ui/core/Button"; -import FormHelperText from "@material-ui/core/FormHelperText"; import { observer, inject } from "mobx-react"; +import ShowHelperText from "../ShowHelperText"; @inject("validateStore") @observer @@ -32,17 +32,6 @@ class LayerFindPassword extends Component { }, }; - // helper text 보여주기 - showHelperText = (state) => { - if (state.value) { - return ( - - {state.getValidateText()} - - ); - } - }; - emailOnchange = (e) => { const value = e.target.value; this.props.validateStore.validateValue = value; @@ -101,7 +90,7 @@ class LayerFindPassword extends Component { fullWidth={true} error={!email.validate && email.value != ""} /> - {this.showHelperText(email)} + {ShowHelperText(email)}
- {this.showHelperText(password)} + {ShowHelperText(password)}
- {this.showHelperText(password.check)} + {ShowHelperText(password.check)}
{ - if (state.value) { - return ( - - {state.getValidateText()} - - ); - } - }; - userIdHandler = (e) => { const value = e.target.value; this.props.validateStore.validateValue = value; @@ -143,7 +132,7 @@ class LayerLogin extends Component { onChange={this.userIdHandler} error={email.getError()} /> - {this.showHelperText(email)} + {ShowHelperText(email)}
- {this.showHelperText(password)} + {ShowHelperText(password)}
diff --git a/packages/frontend/src/Components/popup/LayerJoin.js b/packages/frontend/src/Components/popup/LayerJoin.js index ec724e0..c08e35b 100644 --- a/packages/frontend/src/Components/popup/LayerJoin.js +++ b/packages/frontend/src/Components/popup/LayerJoin.js @@ -43,7 +43,7 @@ class LayerJoin extends Component { value: "", validate: false, getValidateText: () => - this.state.password.validate == true + this.state.password.validate === true ? "사용 가능한 비밀번호입니다" : "6자이상 15자 이하 입력해주세요", getError: () => { @@ -89,7 +89,7 @@ class LayerJoin extends Component { })); // 입력된 이메일값이 공백이 아닐때 - if (value == "") { + if (value === "") { return; } // 이메일 중복 여부 체크 From 0c27541fcb909e4f8ea5bdd36d149cc293bffa59 Mon Sep 17 00:00:00 2001 From: hyein Date: Tue, 8 Sep 2020 23:16:54 +0900 Subject: [PATCH 3/7] =?UTF-8?q?#212=20=ED=9A=8C=EC=9B=90=EC=A0=95=EB=B3=B4?= =?UTF-8?q?=EC=88=98=EC=A0=95=20state=20=EA=B5=AC=EC=A1=B0=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/Components/popup/LayerModifyInfo.js | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/frontend/src/Components/popup/LayerModifyInfo.js b/packages/frontend/src/Components/popup/LayerModifyInfo.js index 3745653..2bc44b9 100644 --- a/packages/frontend/src/Components/popup/LayerModifyInfo.js +++ b/packages/frontend/src/Components/popup/LayerModifyInfo.js @@ -9,23 +9,23 @@ import { observer, inject } from "mobx-react"; @observer class LayerModifyInfo extends Component { state = { - userEmail: JSON.parse(localStorage.getItem("userInfo")), signupDate: "", - nameValidate: false, - nameValidateMessage: "", - passwordValidate: null, - passwordValidateMessage: "", - passwordCheck: "", - passwordCheckValidate: null, - passwordCheckValidateMessage: "", name: { + value: "", + validate: false, + message: "", + }, + email: { + value: JSON.parse(localStorage.getItem("userInfo")), validate: false, message: "", }, password: { + value: "", validate: null, message: "", check: { + value: "", validate: null, message: "", }, @@ -144,7 +144,7 @@ class LayerModifyInfo extends Component { // 서버에서 데이터 가져오기 getMemberData = () => { - console.log(this.state.userEmail); + console.log(this.state.email.value); fetch("/memberInfo", { headers: { Accept: "application/json", @@ -152,7 +152,7 @@ class LayerModifyInfo extends Component { }, method: "POST", body: JSON.stringify({ - email: this.state.userEmail, + email: this.state.email.value, }), }) .then((res) => res.json()) @@ -190,7 +190,7 @@ class LayerModifyInfo extends Component { }, method: "POST", body: JSON.stringify({ - userEmail: this.state.userEmail, + userEmail: this.state.email.value, modifyName: this.state.name.value, modifyPassword: this.state.password.validate && From 584e9464d5c02f93712a7bc7e45fdf80e2a044e2 Mon Sep 17 00:00:00 2001 From: hyein Date: Tue, 8 Sep 2020 23:17:32 +0900 Subject: [PATCH 4/7] =?UTF-8?q?#212=20=EA=B0=80=EC=9E=85=EB=82=A0=EC=A7=9C?= =?UTF-8?q?=20=EC=A0=95=EC=83=81=EC=A0=81=EC=9C=BC=EB=A1=9C=20=EB=B6=88?= =?UTF-8?q?=EB=9F=AC=EC=98=A4=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/Components/popup/LayerModifyInfo.js | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/packages/frontend/src/Components/popup/LayerModifyInfo.js b/packages/frontend/src/Components/popup/LayerModifyInfo.js index 2bc44b9..317e552 100644 --- a/packages/frontend/src/Components/popup/LayerModifyInfo.js +++ b/packages/frontend/src/Components/popup/LayerModifyInfo.js @@ -159,15 +159,13 @@ class LayerModifyInfo extends Component { .then((json) => { console.log(json); // 이름, 가입날짜 셋팅 - if (json._username !== null) { - this.setState((prevState) => ({ - name: { - ...prevState.name, - value: json._username, - }, - signupDate: json._signupDate, - })); - } + this.setState((prevState) => ({ + signupDate: json._signupDate, + name: { + ...prevState.name, + value: json._username ? json._username : "", + }, + })); }); }; From d31b57b17cead94e2c37da6cf56acc63423fecbc Mon Sep 17 00:00:00 2001 From: hyein Date: Tue, 8 Sep 2020 23:50:20 +0900 Subject: [PATCH 5/7] =?UTF-8?q?#212=20=ED=9A=8C=EC=9B=90=EC=A0=95=EB=B3=B4?= =?UTF-8?q?=EC=88=98=EC=A0=95=20state=20=EA=B5=AC=EC=A1=B0=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/Components/popup/LayerModifyInfo.js | 19 +++++++------------ 1 file changed, 7 insertions(+), 12 deletions(-) diff --git a/packages/frontend/src/Components/popup/LayerModifyInfo.js b/packages/frontend/src/Components/popup/LayerModifyInfo.js index 317e552..5dde0aa 100644 --- a/packages/frontend/src/Components/popup/LayerModifyInfo.js +++ b/packages/frontend/src/Components/popup/LayerModifyInfo.js @@ -15,19 +15,14 @@ class LayerModifyInfo extends Component { validate: false, message: "", }, - email: { - value: JSON.parse(localStorage.getItem("userInfo")), - validate: false, - message: "", }, + email: JSON.parse(localStorage.getItem("userInfo")), password: { value: "", - validate: null, - message: "", + validate: false, check: { value: "", - validate: null, - message: "", + validate: false, }, }, }; @@ -144,7 +139,7 @@ class LayerModifyInfo extends Component { // 서버에서 데이터 가져오기 getMemberData = () => { - console.log(this.state.email.value); + console.log(this.state.email); fetch("/memberInfo", { headers: { Accept: "application/json", @@ -152,7 +147,7 @@ class LayerModifyInfo extends Component { }, method: "POST", body: JSON.stringify({ - email: this.state.email.value, + email: this.state.email, }), }) .then((res) => res.json()) @@ -188,7 +183,7 @@ class LayerModifyInfo extends Component { }, method: "POST", body: JSON.stringify({ - userEmail: this.state.email.value, + userEmail: this.state.email, modifyName: this.state.name.value, modifyPassword: this.state.password.validate && @@ -300,7 +295,7 @@ class LayerModifyInfo extends Component { Date: Tue, 8 Sep 2020 23:50:53 +0900 Subject: [PATCH 6/7] =?UTF-8?q?#212=20=ED=9A=8C=EC=9B=90=EC=A0=95=EB=B3=B4?= =?UTF-8?q?=EC=88=98=EC=A0=95=20helpertext=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/Components/popup/LayerModifyInfo.js | 116 ++++++++---------- 1 file changed, 50 insertions(+), 66 deletions(-) diff --git a/packages/frontend/src/Components/popup/LayerModifyInfo.js b/packages/frontend/src/Components/popup/LayerModifyInfo.js index 5dde0aa..86bf7a6 100644 --- a/packages/frontend/src/Components/popup/LayerModifyInfo.js +++ b/packages/frontend/src/Components/popup/LayerModifyInfo.js @@ -2,8 +2,8 @@ import React, { Component } from "react"; // import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; import TextField from "@material-ui/core/TextField"; import Button from "@material-ui/core/Button"; -import FormHelperText from "@material-ui/core/FormHelperText"; import { observer, inject } from "mobx-react"; +import ShowHelperText from "../ShowHelperText"; @inject("validateStore") @observer @@ -13,16 +13,55 @@ class LayerModifyInfo extends Component { name: { value: "", validate: false, - message: "", - }, + getValidateText: () => + this.state.name.validate === true + ? "사용 가능한 이름 형식 입니다." + : "2자이상 특수문자 사용불가", + getError: () => { + let error = false; + + if (this.state.name.validate) { + return (error = true); + } + + return error; + }, }, email: JSON.parse(localStorage.getItem("userInfo")), password: { value: "", validate: false, + getValidateText: () => + this.state.password.validate === true + ? "사용 가능한 비밀번호입니다" + : "6자이상 15자 이하 입력해주세요", + getError: () => { + let error = false; + if (this.state.password.value !== "") { + error = !this.state.password.validate; + } + return error; + }, check: { value: "", validate: false, + getValidateText: () => { + if ( + this.state.password.check.value === + this.state.password.value + ) { + return "비밀번호가 일치합니다"; + } else { + return "비밀번호가 일치하지 않습니다"; + } + }, + getError: () => { + let error = false; + if (this.state.password.check.value !== "") { + error = !this.state.password.check.validate; + } + return error; + }, }, }, }; @@ -230,44 +269,9 @@ class LayerModifyInfo extends Component { this.getMemberData(); } - // input error check - getError = { - nameResult: false, - passwordResult: false, - passwordCheckResult: false, - - getNameError: () => { - if (this.state.name.value !== "") { - this.getError.nameResult = !this.state.name.validate; - } else { - this.getError.nameResult = false; - } - - return this.getError.nameResult; - }, - - getPasswordError: () => { - if (this.state.password.value !== "") { - this.getError.passwordResult = !this.state.password.validate; - } else { - this.getError.passwordResult = false; - } - return this.getError.passwordResult; - }, - - getPasswordCheckError: () => { - if (this.state.password.check.value !== "") { - this.getError.passwordCheckResult = !this.state.password.check - .validate; - } else { - this.getError.passwordCheckResult = false; - } - return this.getError.passwordCheckResult; - }, - }; - render() { - const { name, userEmail, signupDate, password } = this.state; + const { name, email, signupDate, password } = this.state; + return (
@@ -281,15 +285,9 @@ class LayerModifyInfo extends Component { type='text' onChange={this.nameOnChange} fullWidth={true} - error={this.getError.getNameError()} + error={name.getError()} /> - {name.message.length > 0 && - !name.validate && - name.validate !== null && ( - - {name.message} - - )} + {ShowHelperText(name)}
- {password.message.length > 0 && - !password.validate && - password.validate !== null && ( - - {password.message} - - )} + {ShowHelperText(password)}
- {password.check.value.length > 0 && - password.check.vaidate !== null && ( - - {password.check.message} - - )} + {ShowHelperText(password.check)}
Date: Wed, 9 Sep 2020 00:14:19 +0900 Subject: [PATCH 7/7] =?UTF-8?q?#212=20validateStore.js=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0=20Validate.js=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/Components/popup/LayerFindPassword.js | 8 ++--- .../src/Components/popup/LayerJoin.js | 10 ++---- .../src/Components/popup/LayerLogin.js | 9 +++-- .../src/Components/popup/LayerModifyInfo.js | 11 ++---- packages/frontend/src/Stores/index.js | 18 +++++----- packages/frontend/src/Stores/validateStore.js | 34 ------------------- packages/frontend/src/utils/validate.js | 16 +++++++++ 7 files changed, 36 insertions(+), 70 deletions(-) delete mode 100644 packages/frontend/src/Stores/validateStore.js create mode 100644 packages/frontend/src/utils/validate.js diff --git a/packages/frontend/src/Components/popup/LayerFindPassword.js b/packages/frontend/src/Components/popup/LayerFindPassword.js index e105751..ff7dc0b 100644 --- a/packages/frontend/src/Components/popup/LayerFindPassword.js +++ b/packages/frontend/src/Components/popup/LayerFindPassword.js @@ -2,11 +2,8 @@ import React, { Component } from "react"; // import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; import TextField from "@material-ui/core/TextField"; import Button from "@material-ui/core/Button"; -import { observer, inject } from "mobx-react"; import ShowHelperText from "../ShowHelperText"; - -@inject("validateStore") -@observer +import Validate from "../../utils/validate"; class LayerFindPassword extends Component { state = { email: { @@ -34,13 +31,12 @@ class LayerFindPassword extends Component { emailOnchange = (e) => { const value = e.target.value; - this.props.validateStore.validateValue = value; this.setState((prevState) => ({ email: { ...prevState.email, value: value, - validate: this.props.validateStore.getValidate("MAIL"), + validate: Validate.getEmalValidate(value), match: this.state.email.value ? null : null, }, })); diff --git a/packages/frontend/src/Components/popup/LayerJoin.js b/packages/frontend/src/Components/popup/LayerJoin.js index c08e35b..850a33d 100644 --- a/packages/frontend/src/Components/popup/LayerJoin.js +++ b/packages/frontend/src/Components/popup/LayerJoin.js @@ -6,11 +6,9 @@ import Checkbox from "@material-ui/core/Checkbox"; import AgreeLink from "../agree/AgreeLink"; import Service from "../agree/Service"; import Privacy from "../agree/Privacy"; -import { observer, inject } from "mobx-react"; import ShowHelperText from "../ShowHelperText"; +import Validate from "../../utils/validate"; -@inject("validateStore") -@observer class LayerJoin extends Component { state = { email: { @@ -79,7 +77,6 @@ class LayerJoin extends Component { emailOnChange = (e) => { const value = e.target.value; - this.props.validateStore.validateValue = value; this.setState((prevState) => ({ email: { @@ -100,7 +97,7 @@ class LayerJoin extends Component { email: { ...prevState.email, overlapping: json, - validate: this.props.validateStore.getValidate("MAIL"), + validate: Validate.getEmalValidate(value), }, })); }); @@ -108,7 +105,6 @@ class LayerJoin extends Component { passwordOnChange = (e) => { const value = e.target.value; - this.props.validateStore.validateValue = value; this.setState((prevState) => ({ password: { @@ -120,7 +116,7 @@ class LayerJoin extends Component { this.setState((prevState) => ({ password: { ...prevState.password, - validate: this.props.validateStore.getValidate("PASSWORD"), + validate: Validate.getPasswordValidate(value), }, })); }; diff --git a/packages/frontend/src/Components/popup/LayerLogin.js b/packages/frontend/src/Components/popup/LayerLogin.js index 914071f..8fd2445 100644 --- a/packages/frontend/src/Components/popup/LayerLogin.js +++ b/packages/frontend/src/Components/popup/LayerLogin.js @@ -3,8 +3,9 @@ import TextField from "@material-ui/core/TextField"; import Button from "@material-ui/core/Button"; import { observer, inject } from "mobx-react"; import ShowHelperText from "../ShowHelperText"; +import Validate from "../../utils/validate"; -@inject("loginStore", "validateStore") +@inject("loginStore") @observer class LayerLogin extends Component { state = { @@ -46,26 +47,24 @@ class LayerLogin extends Component { userIdHandler = (e) => { const value = e.target.value; - this.props.validateStore.validateValue = value; this.setState((prevState) => ({ email: { ...prevState.email, value: value, - validate: this.props.validateStore.getValidate("MAIL"), + validate: Validate.getEmalValidate(value), }, })); }; userPwHandler = (e) => { const value = e.target.value; - this.props.validateStore.validateValue = value; this.setState((prevState) => ({ password: { ...prevState.password, value: value, - validate: this.props.validateStore.getValidate("PASSWORD"), + validate: Validate.getPasswordValidate(value), }, })); }; diff --git a/packages/frontend/src/Components/popup/LayerModifyInfo.js b/packages/frontend/src/Components/popup/LayerModifyInfo.js index 86bf7a6..0592450 100644 --- a/packages/frontend/src/Components/popup/LayerModifyInfo.js +++ b/packages/frontend/src/Components/popup/LayerModifyInfo.js @@ -2,11 +2,8 @@ import React, { Component } from "react"; // import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; import TextField from "@material-ui/core/TextField"; import Button from "@material-ui/core/Button"; -import { observer, inject } from "mobx-react"; import ShowHelperText from "../ShowHelperText"; - -@inject("validateStore") -@observer +import Validate from "../../utils/validate"; class LayerModifyInfo extends Component { state = { signupDate: "", @@ -69,13 +66,12 @@ class LayerModifyInfo extends Component { // 이름 유효성 검사, state 저장 nameOnChange = (e) => { const value = e.target.value; - this.props.validateStore.validateValue = value; this.setState((prevState) => ({ name: { ...prevState.name, value: value, - validate: this.props.validateStore.getValidate("NAME"), + validate: Validate.getNameValidate(value), }, })); }; @@ -83,7 +79,6 @@ class LayerModifyInfo extends Component { // 비밀번호 유효성 검사, state 저장 passwordOnChange = (e) => { const value = e.target.value; - this.props.validateStore.validateValue = value; this.setState((prevState) => ({ password: { @@ -93,7 +88,7 @@ class LayerModifyInfo extends Component { })); // 비밀번호 유효성검사 - const validate = this.props.validateStore.getValidate("PASSWORD"); + const validate = Validate.getPasswordValidate(value); if (!validate) { if (e.target.value.length <= 0) { this.setState((prevState) => ({ diff --git a/packages/frontend/src/Stores/index.js b/packages/frontend/src/Stores/index.js index 9933416..e5c902c 100644 --- a/packages/frontend/src/Stores/index.js +++ b/packages/frontend/src/Stores/index.js @@ -3,17 +3,15 @@ import SearchStore from "./searchStore"; import BtnStore from "./btnStore"; import loginStore from "./loginStore"; import PopupStore from "./popupStore"; -import validateStore from "./validateStore"; class RootStore { - constructor() { - this.listStore = new ListStore(this); - this.searchStore = new SearchStore(this); - this.btnStore = new BtnStore(this); - this.loginStore = new loginStore(this); - this.popupStore = new PopupStore(this); - this.validateStore = new validateStore(this); - } + constructor() { + this.listStore = new ListStore(this); + this.searchStore = new SearchStore(this); + this.btnStore = new BtnStore(this); + this.loginStore = new loginStore(this); + this.popupStore = new PopupStore(this); + } } -export default RootStore; \ No newline at end of file +export default RootStore; diff --git a/packages/frontend/src/Stores/validateStore.js b/packages/frontend/src/Stores/validateStore.js deleted file mode 100644 index 38abf5d..0000000 --- a/packages/frontend/src/Stores/validateStore.js +++ /dev/null @@ -1,34 +0,0 @@ -import { observable, action } from "mobx"; - -export default class validateStore { - @observable validateValue = ''; - - constructor(root) { - this.root = root; - - // 고정 정규식 - this.mailFormat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/; - this.passwordFormat = /^(?=[a-zA-Z0-9!@$%^*#])(?!.*[^a-zA-Z0-9!@$%^*#]).{6,15}$/; - this.nameFormat = /^[가-힣a-zA-Z]{2,20}$/; - } - - @action - getValidate = (type) => { - let reg = ''; - - // eslint-disable-next-line default-case - switch(type) { - case 'MAIL': - reg = this.mailFormat; - break; - case 'PASSWORD': - reg = this.passwordFormat; - break; - case 'NAME': - reg = this.nameFormat; - break; - } - - return reg.test(this.validateValue); - } -} \ No newline at end of file diff --git a/packages/frontend/src/utils/validate.js b/packages/frontend/src/utils/validate.js new file mode 100644 index 0000000..30d0653 --- /dev/null +++ b/packages/frontend/src/utils/validate.js @@ -0,0 +1,16 @@ +const getEmalValidate = (value) => { + const format = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/; + return format.test(value); +}; + +const getPasswordValidate = (value) => { + const format = /^(?=[a-zA-Z0-9!@$%^*#])(?!.*[^a-zA-Z0-9!@$%^*#]).{6,15}$/; + return format.test(value); +}; + +const getNameValidate = (value) => { + const format = /^[가-힣a-zA-Z]{2,20}$/; + return format.test(value); +}; + +export default { getEmalValidate, getPasswordValidate, getNameValidate };