Merge pull request hi-hyein#256 from hi-hyein/feature/212-helper-text

Feature/212 helper text
ThinkAboutSoftware · Sep 8, 2020 · 8f1e90a · 8f1e90a
2 parents b577981 + fc5e432
commit 8f1e90a
Show file tree

Hide file tree

Showing 8 changed files with 130 additions and 205 deletions.
diff --git a/packages/frontend/src/Components/ShowHelperText.js 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 (
+            <FormHelperText id='component-helper-text'>
+                {state.getValidateText()}
+            </FormHelperText>
+        );
+    }
+};
+
+export default showHelperText;
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 FormHelperText from "@material-ui/core/FormHelperText";
-import { observer, inject } from "mobx-react";
-
-@inject("validateStore")
-@observer
+import ShowHelperText from "../ShowHelperText";
+import Validate from "../../utils/validate";
 class LayerFindPassword extends Component {
     state = {
         email: {
@@ -32,26 +29,14 @@ class LayerFindPassword extends Component {
         },
     };
 
-    // helper text 보여주기
-    showHelperText = (state) => {
-        if (state.value) {
-            return (
-                <FormHelperText id='component-helper-text'>
-                    {state.getValidateText()}
-                </FormHelperText>
-            );
-        }
-    };
-
     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,
             },
         }));
@@ -99,9 +84,9 @@ class LayerFindPassword extends Component {
                         type='text'
                         onChange={this.emailOnchange}
                         fullWidth={true}
-                        error={!email.validate && email.value != ""}
+                        error={!email.validate && email.value !== ""}
                     />
-                    {this.showHelperText(email)}
+                    {ShowHelperText(email)}
                 </div>
                 <div style={{ marginTop: "20px" }}>
                     <Button

diff --git a/packages/frontend/src/Components/popup/LayerJoin.js b/packages/frontend/src/Components/popup/LayerJoin.js
@@ -2,15 +2,13 @@ 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 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: {
@@ -43,7 +41,7 @@ class LayerJoin extends Component {
             value: "",
             validate: false,
             getValidateText: () =>
-                this.state.password.validate == true
+                this.state.password.validate === true
                     ? "사용 가능한 비밀번호입니다"
                     : "6자이상 15자 이하 입력해주세요",
             getError: () => {
@@ -77,20 +75,8 @@ class LayerJoin extends Component {
         },
     };
 
-    // helper text 보여주기
-    showHelperText = (state) => {
-        if (state.value) {
-            return (
-                <FormHelperText id='component-helper-text'>
-                    {state.getValidateText()}
-                </FormHelperText>
-            );
-        }
-    };
-
     emailOnChange = (e) => {
         const value = e.target.value;
-        this.props.validateStore.validateValue = value;
 
         this.setState((prevState) => ({
             email: {
@@ -100,7 +86,7 @@ class LayerJoin extends Component {
         }));
 
         // 입력된 이메일값이 공백이 아닐때
-        if (value == "") {
+        if (value === "") {
             return;
         }
         // 이메일 중복 여부 체크
@@ -111,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: {
@@ -131,7 +116,7 @@ class LayerJoin extends Component {
         this.setState((prevState) => ({
             password: {
                 ...prevState.password,
-                validate: this.props.validateStore.getValidate("PASSWORD"),
+                validate: Validate.getPasswordValidate(value),
             },
         }));
     };
@@ -226,7 +211,7 @@ class LayerJoin extends Component {
                         error={email.getError()}
                         fullWidth={true}
                     />
-                    {this.showHelperText(email)}
+                    {ShowHelperText(email)}
                 </div>
                 <div>
                     <TextField
@@ -241,7 +226,7 @@ class LayerJoin extends Component {
                         fullWidth={true}
                         error={password.getError()}
                     />
-                    {this.showHelperText(password)}
+                    {ShowHelperText(password)}
                 </div>
                 <div>
                     <TextField
@@ -256,7 +241,7 @@ class LayerJoin extends Component {
                         fullWidth={true}
                         error={password.check.getError()}
                     />
-                    {this.showHelperText(password.check)}
+                    {ShowHelperText(password.check)}
                 </div>
                 <div
                     className='check-area'

diff --git a/packages/frontend/src/Components/popup/LayerLogin.js b/packages/frontend/src/Components/popup/LayerLogin.js
@@ -1,10 +1,11 @@
 import React, { Component } from "react";
 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";
+import Validate from "../../utils/validate";
 
-@inject("loginStore", "validateStore")
+@inject("loginStore")
 @observer
 class LayerLogin extends Component {
     state = {
@@ -44,39 +45,26 @@ class LayerLogin extends Component {
         },
     };
 
-    // helper text 보여주기
-    showHelperText = (state) => {
-        if (state.value) {
-            return (
-                <FormHelperText id='component-helper-text'>
-                    {state.getValidateText()}
-                </FormHelperText>
-            );
-        }
-    };
-
     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),
             },
         }));
     };
@@ -143,7 +131,7 @@ class LayerLogin extends Component {
                         onChange={this.userIdHandler}
                         error={email.getError()}
                     />
-                    {this.showHelperText(email)}
+                    {ShowHelperText(email)}
                 </div>
                 <div>
                     <TextField
@@ -157,7 +145,7 @@ class LayerLogin extends Component {
                         onChange={this.userPwHandler}
                         error={password.getError()}
                     />
-                    {this.showHelperText(password)}
+                    {ShowHelperText(password)}
                 </div>
                 <div>
                     <button