From a863528473f9de7413189679405ef20d7a6f30f4 Mon Sep 17 00:00:00 2001 From: junh_eee Date: Thu, 1 Sep 2022 17:15:20 +0900 Subject: [PATCH] =?UTF-8?q?=EB=B9=84=EB=B0=80=EB=B2=88=ED=98=B8=20?= =?UTF-8?q?=EC=B0=BE=EA=B8=B0=20components?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../account/find/AccountFindPassword.js | 109 ++++++++++++++++ src/components/account/find/AccountFindTab.js | 90 +++++++++++++ .../account/find/AccountFindUserId.js | 118 ++++++++++++++++++ src/components/account/login/AccountLogin.js | 3 +- .../account/find/AccounFindTabContainer.js | 25 ++++ .../find/AccountFindPasswordContainer.js | 13 ++ .../find/AccountFindUserIdContainer.js | 13 ++ src/router/routes/RouteAccount.js | 8 ++ src/views/account/AccountFind.js | 12 ++ 9 files changed, 390 insertions(+), 1 deletion(-) create mode 100644 src/components/account/find/AccountFindPassword.js create mode 100644 src/components/account/find/AccountFindTab.js create mode 100644 src/components/account/find/AccountFindUserId.js create mode 100644 src/containers/account/find/AccounFindTabContainer.js create mode 100644 src/containers/account/find/AccountFindPasswordContainer.js create mode 100644 src/containers/account/find/AccountFindUserIdContainer.js create mode 100644 src/views/account/AccountFind.js 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( + <> + +
+ + + + + + + + + + + +
+ + + + + + + + + + + + +
+ + +
+ + + 남은시간 : 3:00 + + + + +
+ + +
+ + + setModal(!modal)} className='modal-dialog-centered user-search-modal'> + setModal(!modal)}>비밀번호 확인 + + 새로운 비밀번호로 변경해주세요. + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + + ) +} \ 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( + <> + +
+ + + + + + + + + + + +
+ + + + {/* */} + + + + + + + + +
+ + +
+ + + 남은시간 : 3:00 + + + + +
+ + +
+ + + setConfirmModal(!confirmModal)} className='confirmModal-dialog-centered user-search-confirmModal'> + setConfirmModal(!confirmModal)}>아이디 확인 + + 회원님의 아이디는
TEST123123 입니다. + + + {/* {' '} + + +
+ +
+ + + ) +} \ 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