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 (
+            <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
index 3f5a055..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 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
index 0b68d29..850a33d 100644
--- 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,7 +97,7 @@ class LayerJoin extends Component {
                     email: {
                         ...prevState.email,
                         overlapping: json,
-                        validate: this.props.validateStore.getValidate("MAIL"),
+                        validate: Validate.getEmalValidate(value),
                     },
                 }));
             });
@@ -119,7 +105,6 @@ class LayerJoin extends Component {
 
     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
index b9986ff..8fd2445 100644
--- 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
diff --git a/packages/frontend/src/Components/popup/LayerModifyInfo.js b/packages/frontend/src/Components/popup/LayerModifyInfo.js
index 3745653..0592450 100644
--- a/packages/frontend/src/Components/popup/LayerModifyInfo.js
+++ b/packages/frontend/src/Components/popup/LayerModifyInfo.js
@@ -2,32 +2,63 @@ 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 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: "",
+            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: {
-            validate: null,
-            message: "",
+            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: {
-                validate: null,
-                message: "",
+                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;
+                },
             },
         },
     };
@@ -35,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),
             },
         }));
     };
@@ -49,7 +79,6 @@ class LayerModifyInfo extends Component {
     // 비밀번호 유효성 검사, state 저장
     passwordOnChange = (e) => {
         const value = e.target.value;
-        this.props.validateStore.validateValue = value;
 
         this.setState((prevState) => ({
             password: {
@@ -59,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) => ({
@@ -144,7 +173,7 @@ class LayerModifyInfo extends Component {
 
     // 서버에서 데이터 가져오기
     getMemberData = () => {
-        console.log(this.state.userEmail);
+        console.log(this.state.email);
         fetch("/memberInfo", {
             headers: {
                 Accept: "application/json",
@@ -152,22 +181,20 @@ class LayerModifyInfo extends Component {
             },
             method: "POST",
             body: JSON.stringify({
-                email: this.state.userEmail,
+                email: this.state.email,
             }),
         })
             .then((res) => res.json())
             .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 : "",
+                    },
+                }));
             });
     };
 
@@ -190,7 +217,7 @@ class LayerModifyInfo extends Component {
                     },
                     method: "POST",
                     body: JSON.stringify({
-                        userEmail: this.state.userEmail,
+                        userEmail: this.state.email,
                         modifyName: this.state.name.value,
                         modifyPassword:
                             this.state.password.validate &&
@@ -237,44 +264,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 (
             <div>
                 <div>
@@ -288,21 +280,15 @@ 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 && (
-                            <FormHelperText id='component-helper-text'>
-                                {name.message}
-                            </FormHelperText>
-                        )}
+                    {ShowHelperText(name)}
                 </div>
                 <div>
                     <TextField
                         id='member-email'
                         label='이메일주소'
-                        value={userEmail}
+                        value={email}
                         margin='normal'
                         variant='outlined'
                         fullWidth={true}
@@ -320,15 +306,9 @@ class LayerModifyInfo extends Component {
                         type='password'
                         onChange={this.passwordOnChange}
                         fullWidth={true}
-                        error={!password.validate && password.validate !== null}
+                        error={password.getError()}
                     />
-                    {password.message.length > 0 &&
-                        !password.validate &&
-                        password.validate !== null && (
-                            <FormHelperText id='component-helper-text'>
-                                {password.message}
-                            </FormHelperText>
-                        )}
+                    {ShowHelperText(password)}
                 </div>
                 <div>
                     <TextField
@@ -341,17 +321,9 @@ class LayerModifyInfo extends Component {
                         type='password'
                         onChange={this.passwordCheckOnChange}
                         fullWidth={true}
-                        error={
-                            !password.check.validate &&
-                            password.check.validate !== null
-                        }
+                        error={password.check.getError()}
                     />
-                    {password.check.value.length > 0 &&
-                        password.check.vaidate !== null && (
-                            <FormHelperText id='component-helper-text'>
-                                {password.check.message}
-                            </FormHelperText>
-                        )}
+                    {ShowHelperText(password.check)}
                 </div>
                 <div>
                     <TextField
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 };