hi-hyein#212 validateStore.js 제거 Validate.js 추가

ThinkAboutSoftware · Sep 8, 2020 · fc5e432 · fc5e432
1 parent 126a5de
commit fc5e432
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 70 deletions.
diff --git 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
@@ -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,15 +97,14 @@ class LayerJoin extends Component {
                     email: {
                         ...prevState.email,
                         overlapping: json,
-                        validate: this.props.validateStore.getValidate("MAIL"),
+                        validate: Validate.getEmalValidate(value),
                     },
                 }));
             });
     };
 
     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
@@ -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
@@ -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,21 +66,19 @@ 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),
             },
         }));
     };
 
     // 비밀번호 유효성 검사, 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
@@ -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;
+export default RootStore;
diff --git a/packages/frontend/src/Stores/validateStore.js b/packages/frontend/src/Stores/validateStore.js
diff --git a/packages/frontend/src/utils/validate.js 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 };