diff --git a/src/components/account/find/AccountFindPassword.js b/src/components/account/find/AccountFindPassword.js
new file mode 100644
index 0000000..2ada5e5
--- /dev/null
+++ b/src/components/account/find/AccountFindPassword.js
@@ -0,0 +1,109 @@
+import { useState, useEffect } from 'react'
+import { useParams, Link } from 'react-router-dom'
+import { useSelector, useDispatch } from 'react-redux'
+
+import { Form, InputGroup, InputGroupAddon, InputGroupText, Card, CardBody, Row, Col, Nav, NavItem, NavLink, TabContent, TabPane, Alert, FormGroup, Input, Label, Button,
+ Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'
+ import { User, Info, CreditCard, Lock, Check, X } from 'react-feather'
+
+import loginImg from '../../../assets/images/login01.png';
+import '../../../assets/css/custom.css';
+
+export const AccountFindPassword = props => {
+ const [activeTab, setActiveTab] = useState('1')
+
+ // ** Function to toggle tabs
+ const toggle = tab => setActiveTab(tab)
+ const [modal, setModal] = useState(false)
+
+
+
+ return(
+ <>
+
+
+
+ >
+ )
+}
\ No newline at end of file
diff --git a/src/components/account/find/AccountFindTab.js b/src/components/account/find/AccountFindTab.js
new file mode 100644
index 0000000..a430f60
--- /dev/null
+++ b/src/components/account/find/AccountFindTab.js
@@ -0,0 +1,90 @@
+import { useState } from "react";
+import { Form, InputGroup, InputGroupAddon, InputGroupText, Card, CardBody, Row, Col, Nav, NavItem, NavLink, TabContent, TabPane, Alert, FormGroup, Input, Label, Button,
+ Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'
+import classnames from 'classnames';
+import {
+ User,
+ Info,
+ Share,
+ X,
+ Lock,
+ Edit,
+ Trash2,
+ Image,
+ UserCheck,
+ Clipboard,
+ Settings,
+ AlertTriangle
+} from 'react-feather';
+import { AccountFindUserId } from "./AccountFindUserId";
+import { AccountFindPassword } from "./AccountFindPassword";
+import { AccountFindUserIdContainer } from "../../../containers/account/find/AccountFindUserIdContainer";
+import { AccountFindPasswordContainer } from "../../../containers/account/find/AccountFindPasswordContainer";
+import { useHistory } from 'react-router-dom'
+
+export const AccountFindTab = props => {
+ const [activeTab, setActiveTab] = useState('1');
+ const history = useHistory();
+
+ const toggle = tab => setActiveTab(tab)
+ const [centeredModal, setCenteredModal] = useState(false)
+ const [centeredModal02, setCenteredModal02] = useState(false)
+
+ // const toggle = tab => {
+ // if (activeTab !== tab) setActiveTab(tab);
+ // };
+
+ const handlerClose = () => {
+ history.push(`/account/login/AccountLogin`)
+ }
+
+ return(
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ >
+ )
+
+}
\ No newline at end of file
diff --git a/src/components/account/find/AccountFindUserId.js b/src/components/account/find/AccountFindUserId.js
new file mode 100644
index 0000000..e718027
--- /dev/null
+++ b/src/components/account/find/AccountFindUserId.js
@@ -0,0 +1,118 @@
+import * as yup from 'yup';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useState, useEffect } from 'react'
+import { useParams, Link } from 'react-router-dom'
+import { useSelector, useDispatch } from 'react-redux'
+
+import { Form, InputGroup, InputGroupAddon, InputGroupText, Card, CardBody, Row, Col, Nav, NavItem, NavLink, TabContent, TabPane, Alert, FormGroup, Input, Label, Button,
+ Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'
+ import { User, Info, CreditCard, Lock, Check, X } from 'react-feather'
+
+import loginImg from '../../../assets/images/login01.png';
+import '../../../assets/css/custom.css';
+
+export const AccountFindUserId = props => {
+ const [activeTab, setActiveTab] = useState('1')
+
+ // ** Function to toggle tabs
+ const toggle = tab => setActiveTab(tab)
+ const [confirmModal, setConfirmModal] = useState(false)
+ const [valiModal, setValiModal] = useState({
+ isOpen: false,
+ title: '',
+ desc: ''
+ });
+
+ const crtfyhpVali = yup.object().shape({
+ memberName: yup.string().trim().required('이름을 입력해 주세요.'),
+ hpno: yup.string().required('휴대폰번호를 입력해 주세요.')
+ })
+
+ const handlerCrtfySend = () => {
+ // const vData = getValues();
+ setValiModal({
+ isOpen: true,
+ title: '인증번호 발송',
+ desc: '인증번호 발송은 3회 까지만 가능합니다.'
+ });
+ return false;
+ }
+
+
+
+ return(
+ <>
+
+
+
+ >
+ )
+}
\ No newline at end of file
diff --git a/src/components/account/login/AccountLogin.js b/src/components/account/login/AccountLogin.js
index 222f48a..f3939f9 100644
--- a/src/components/account/login/AccountLogin.js
+++ b/src/components/account/login/AccountLogin.js
@@ -152,7 +152,8 @@ export const AccountLogin = ({ props }) => {
diff --git a/src/containers/account/find/AccounFindTabContainer.js b/src/containers/account/find/AccounFindTabContainer.js
new file mode 100644
index 0000000..bcdba53
--- /dev/null
+++ b/src/containers/account/find/AccounFindTabContainer.js
@@ -0,0 +1,25 @@
+import { AccountFindTab } from "../../../components/account/find/AccountFindTab";
+
+import loginImg from '../../../assets/images/login01.png';
+
+import '../../../assets/css/custom.css';
+
+export const AccountFindTabContainer = () => {
+
+ return (
+ <>
+
+
Drone Control System
+
+
+
+
+
+ >
+
+ );
+};
diff --git a/src/containers/account/find/AccountFindPasswordContainer.js b/src/containers/account/find/AccountFindPasswordContainer.js
new file mode 100644
index 0000000..dba4511
--- /dev/null
+++ b/src/containers/account/find/AccountFindPasswordContainer.js
@@ -0,0 +1,13 @@
+import { AccountFindPassword } from "../../../components/account/find/AccountFindPassword"
+
+export const AccountFindPasswordContainer = props => {
+
+ return(
+
+ <>
+
+ >
+ )
+}
\ No newline at end of file
diff --git a/src/containers/account/find/AccountFindUserIdContainer.js b/src/containers/account/find/AccountFindUserIdContainer.js
new file mode 100644
index 0000000..511f572
--- /dev/null
+++ b/src/containers/account/find/AccountFindUserIdContainer.js
@@ -0,0 +1,13 @@
+import { AccountFindUserId } from "../../../components/account/find/AccountFindUserId"
+
+export const AccountFindUserIdContainer = props => {
+
+ return(
+
+ <>
+
+ >
+ )
+}
\ No newline at end of file
diff --git a/src/router/routes/RouteAccount.js b/src/router/routes/RouteAccount.js
index 270e36d..b3c859f 100644
--- a/src/router/routes/RouteAccount.js
+++ b/src/router/routes/RouteAccount.js
@@ -23,6 +23,14 @@ const RouteAccount = [
import('../../views/Mypage/Mypage')
)
},
+ {
+ path: '/account/find',
+ component: lazy(() => import('../../views/account/AccountFind')),
+ layout: 'BlankLayout',
+ meta: {
+ authRoute: true
+ }
+ }
];
export default RouteAccount;
diff --git a/src/views/account/AccountFind.js b/src/views/account/AccountFind.js
new file mode 100644
index 0000000..756bedd
--- /dev/null
+++ b/src/views/account/AccountFind.js
@@ -0,0 +1,12 @@
+import { AccountFindTabContainer } from "../../containers/account/find/AccounFindTabContainer";
+
+
+const AccountFindView = props => {
+ return (
+ <>
+
+ >
+ )
+};
+
+export default AccountFindView;
\ No newline at end of file